Populate a select from a previous selected option
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>
<title>losd list test</title>
<CFQUERY NAME="getyear" datasource="dataname">
SELECT DISTINCT year
FROM carmodels
order by year DESC
</cfquery>
<cfset Start = 1>
<cfset Start2 = 1>
<cfset Start3 = 1>
<cfset End = getyear.recordcount>
<script language="javascript">
/*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*/
<!------ SELECT 1 ----------------->
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]);
}
}
<!------ SELECT 2 ----------------->
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;
}
}
<!------ SELECT 3 ----------------->
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 action="search.cfm" method="post">
<script type="text/javascript">addLoadEvent(loadList1);</script><select id="list1" name="year" style="width: 180px;" onChange="loadList2(this.value);"></select>
<!---- Here i get all the years and its working --->
<select id="list2" name="vendor" style="width: 180px;" onChange="loadList3(this.value);"></select>
<!---- the list3.disabled = true; is activated and the field is grey out once I select a year the vendor list appears GREAT --->
<select id="list3" name="Model" style="width: 180px;"></select>
<!---- the list3.disabled = true; is not activated and once i select a vendor it stays empty and the list3.disabled = true; comes in fonction and the field is greyed out--->
</form>
</body>
</html>
Thank you in advence for your help
AdChoices