cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0
Upvote

Populate a select from a previous selected option

Gear_Head
New Here ,
Sep 13, 2017 Sep 13, 2017

Copy link to clipboard

Copied

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

TOPICS
Database access

Views

2.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

BKBK Community Expert
Community Expert , Sep 20, 2017 Sep 20, 2017

Next tips:

1) ensure that the annee database column is of integer type.

2) change the initialization code <cfset anneeArray[1][1]=""> to <cfset anneeArray[1][1]="0">

Votes

Translate

Translate
replies 25 Replies 25
latest latest Jump to latest reply
Gear_Head
New Here ,
Sep 21, 2017 Sep 21, 2017

Copy link to clipboard

Copied

LATEST
In Response To BKBK

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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<cfform action="search-result.cfm" method="post">

<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>

<input type="Submit" value="Search">

</cfform>

</body>

</html>

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

CFC

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

<cfcomponent>

<cfset this.dsn = "MyDate">

<cfprocessingdirective pageEncoding="utf-8">

<!--------------- year ----------->

<cffunction name="getyear" access="remote" returntype="array">

    <cfset var yearQry = "">

    <cfquery name = "yearQry" dataSource = "#THIS.dsn#">

    SELECT DISTINCT year

    FROM tx_carmodels

    order by year DESC

    </cfquery>

    <!--- Values for the first - the default - select option --->

    <cfset yearArray[1][1]="">

    <cfset yearArray[1][2]="Select a year">

    <cfloop query="yearQry">

    <cfset yearArray[currentrow+1][1]=yearQry.year>

    <cfset yearArray[currentrow+1][2]=yearQry.year>

    </cfloop>

    <cfreturn yearArray>

</cffunction>

<!--------------- Vendor / Make ----------->

<cffunction name="getVendor" access="remote" returntype="array">

    <cfargument name="yr" required="true" type="string">

    <cfset var vendorQry = "">

    <cfset var vendorArray = arrayNew(2)>

    <cfquery name = "vendorQry" dataSource = "#THIS.dsn#">

    SELECT DISTINCT vendor

    FROM tx_carmodels

    WHERE year = '#arguments.yr#'

    order by vendor  

    </cfquery>

    <!--- Values for the first - the default - select option --->

    <cfset vendorArray[1][1]="">

    <cfset vendorArray[1][2]="Select a vendor">

    <cfloop query="vendorQry">

    <cfset vendorArray[currentrow+1][1]=vendorQry.vendor>

    <cfset vendorArray[currentrow+1][2]=vendorQry.vendor>

    </cfloop>

    <cfreturn vendorArray>

</cffunction>

  <!--------------- Model ----------->

<cffunction name="getModel" access="remote" returntype="array">

    <cfargument name="yr" required="true" type="string">

    <cfargument name="vendor" required="true" type="string">

    <cfset var modelQry = "">

    <cfset var modelArray = arrayNew(2)>

    <cfquery name = "modelQry" dataSource = "#THIS.dsn#">

    SELECT DISTINCT model

    FROM tx_carmodels

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

    order by model 

    </cfquery>

    <!--- Values for the first - the default - select option --->

    <cfset modelArray[1][1]="">

    <cfset modelArray[1][2]="Select a model">

    <cfloop query="modelQry">

    <cfset modelArray[currentrow+1][1]=modelQry.model>

    <cfset modelArray[currentrow+1][2]=modelQry.model>

    </cfloop>

    <cfreturn modelArray>

</cffunction>

<!--------------- options ----------->

<cffunction name="getOption" access="remote" returntype="array">

    <cfargument name="yr" required="true" type="string">

    <cfargument name="vendor" required="true" type="string">

    <cfargument name="model" required="true" type="string">

    <cfset var optionQry = "">

    <cfset var optionArray = arrayNew(2)>

    <cfquery name = "optionQry" dataSource = "#THIS.dsn#">

    SELECT DISTINCT modification

    FROM tx_carmodels

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

    order by modification

    </cfquery>

    <!--- Values for the first - the default - select option --->

    <cfset optionArray[1][1]="">

    <cfset optionArray[1][2]="Select an option">

    <cfloop query="optionQry">

    <cfset optionArray[currentrow+1][1]=optionQry.modification>

    <cfset optionArray[currentrow+1][2]=optionQry.modification>

    </cfloop>

    <cfreturn optionArray>

</cffunction>

</cfcomponent>

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

CFM search-result.cfm

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

<html>

    <head>

    <title>Tire Result</title>

    <cfquery name = "getcar" dataSource = "MyData">

    SELECT *

    FROM tx_carmodels

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

    </cfquery>

    <cfquery name = "gettires" dataSource = "MyData">

    SELECT *

    FROM tyrespecifications

    WHERE carmodel = #getcar.id#

    </cfquery>

    </head>

    <body>

<table>

<cfoutput query="gettires">

<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 :

DEFAULT235/60R18
ALTERNATIVE235/55R19
ALTERNATIVE255/50R19
ALTERNATIVE255/45R20

Thanks BKBK

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation
ColdFusion User Guide
Copyright © 2023 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices