Populate a select from a previous selected option

Report · Sep 13, 2017

Hi,

I use coldfusion but i'm no expert i'm trying to populate 3 select field from a previous selection its year/vendor/model of cars to find the appropriate tire size.

I manage to find some code to make the first 2 to load but the 3rd one the model doesnt work here is my code what M I missing or doing wrong ?

<!DOCTYPE html>

<head>

SELECT DISTINCT year

FROM carmodels

order by year DESC

</cfquery>

/*Fonction addLoadEvent */

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

/*Define the options*/

var tab1 = new Array("Sélectionner une année", <cfloop query = "getyear" startRow = "#Start#" endRow = "#End#"><CFOUTPUT>"#year#"<CFIF getyear.currentRow EQ #end#><CFELSE>, </CFIF></CFOUTPUT></cfloop>);

var tab2 = new Array();

tab2["year"] = new Array("Marque");

<cfloop query = "getyear" startRow = "#Start2#" endRow = "#End#"><CFOUTPUT><cfset lannee = '#year#'>tab2["#year#"] = new Array("Sélectionner une marque" <CFQUERY NAME="getvendor" datasource="dataname">SELECT DISTINCT vendor FROM carmodels WHERE year = '#lannee#' ORDER by vendor</cfquery><cfset End3 = getvendor.recordcount><cfloop query = "getvendor" startRow = "#Start2#" endRow = "#End3#">, "#getvendor.vendor#"</cfloop>);</CFOUTPUT></cfloop>

var tab3 = new Array();

tab3["vendor"] = new Array("Model");

<cfloop query = "getvendor" startRow = "#Start3#" endRow = "#End#"><CFOUTPUT><cfset levendor = '#vendor#'>tab3["#vendor#"] = new Array("Sélectionner un modèle" <CFQUERY NAME="getmodel" datasource="dataname">SELECT DISTINCT model FROM carmodels WHERE vendor = '#levendor#' AND year = #lannee# ORDER by model</cfquery><cfset End4 = getmodel.recordcount><cfloop query = "getmodel" startRow = "#Start3#" endRow = "#End4#">, "#getmodel.model#"</cfloop>);</CFOUTPUT></cfloop>

/*The function to load the list*/

function loadList1() {

var list1 = document.getElementById("list1");

for (var i = 0; i < tab1.length; i++) {

var item = document.createElement('option');

item.value = tab1;

item.innerHTML = tab1;

if (i == 0) {

item.selected = true;

}

list1.appendChild(item);

}

if (tab1.length > 0) {

loadList2(tab1[0]);

}

function loadList2(list1Value) {

var list2 = document.getElementById("list2");

var toDelete = list2.childNodes;

var tab = tab2[list1Value];

while (list2.hasChildNodes()) {

list2.removeChild(toDelete[0]);

}

if (tab) {

for (var i = 0; i < tab.length; i++) {

var item = document.createElement('option');

item.value = tab;

item.innerHTML = tab;

list2.appendChild(item);

}

list2.disabled = false;

}

else {

list2.disabled = true;

}

function loadList3(list2Value) {

var list3 = document.getElementById("list3");

var toDelete = list3.childNodes;

var tab = tab3[list2Value];

while (list3.hasChildNodes()) {

list3.removeChild(toDelete[0]);

}

if (tab) {

for (var i = 0; i < tab.length; i++) {

var item = document.createElement('option');

item.value = tab;

item.innerHTML = tab;

list3.appendChild(item);

}

list3.disabled = false;

}

else {

list3.disabled = true;

}

</script>

</head>

<body>

</form>

</body>

</html>

Thank you in advence for your help

Report · Sep 21, 2017

You are right Bkbk, because i have been looking for this kind of code for a few days before i asked here. So here is the woking one i added a 4th select box for the options and it is working perfectly. Keep in mind that the sitepneus in the CFC bind was a test directory I was using. The database was for a car and tire match :

year/vendor/model/modification

2016/Acura/RDX/3.0i

the search-result.cfm is a simple page to see if i was getting the proper tire size for a specific car.

************************************

CFM main page

************************************

<html>

<head>

<title>Car search</title>

</head>

<body>

<table>

<tr>

<td>Select Year :</td>

<td><cfselect name="year"

bind="cfc:sitepneus.cars.getyear()"

bindonload="true" /></td>

</tr>

<tr>

<td>Select Vendor:</td>

<td><cfselect name="vendor"

bindOnLoad="false"

bind="cfc:sitepneus.cars.getVendor({year})" /></td>

</tr>

<tr>

<td>Select Model:</td>

<td><cfselect name="model"

bindOnLoad="false"

bind="cfc:sitepneus.cars.getModel({year},{vendor})" /></td>

</tr>

<tr>

<td>Select option:</td>

<td><cfselect name="modification"

bindOnLoad="false"

bind="cfc:sitepneus.cars.getoption({year},{vendor},{model})" /></td>

</tr>

</table>

</cfform>

</body>

</html>

************************************

CFC

************************************

SELECT DISTINCT year

FROM tx_carmodels

order by year DESC

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT vendor

FROM tx_carmodels

WHERE year = '#arguments.yr#'

order by vendor

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT model

FROM tx_carmodels

WHERE year = '#arguments.yr#' AND vendor = '#arguments.vendor#'

order by model

</cfquery>

</cfloop>

</cffunction>

SELECT DISTINCT modification

FROM tx_carmodels

WHERE year = '#arguments.yr#' AND vendor = '#arguments.vendor#' AND model = '#arguments.model#'

order by modification

</cfquery>

</cfloop>

</cffunction>

</cfcomponent>

************************************

CFM search-result.cfm

************************************

<html>

<head>

<title>Tire Result</title>

SELECT *

FROM tx_carmodels

WHERE year = #year# AND vendor = '#vendor#' AND model = '#model#'

</cfquery>

SELECT *

FROM tyrespecifications

WHERE carmodel = #getcar.id#

</cfquery>

</head>

<body>

<table>

<tr>

<td>#Spectype#</td>

<td>#front_width#/#front_profile#R#front_diameter#</td>

</tr>

</cfoutput>

</table>

</body>

</html>

To make it clearer Spectype was Default or Alternative. the rest was tire size #front_width#/#front_profile#R#front_diameter# in this case for

year/vendor/model/modification

2016/Acura/RDX/3.0i

would be :

DEFAULT	235/60R18
ALTERNATIVE	235/55R19
ALTERNATIVE	255/50R19
ALTERNATIVE	255/45R20

Thanks BKBK

Populate a select from a previous selected option

1 Correct answer