[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 157
  • Last Modified:

How to dynamically change a drop lists options based off of a parent lists option.

Hey everyone,

I'm not too sure how to ask this, but I'll try my best.  I've got a jump menu that is populated from a database.  When the user selects one to the items in that menu, I need it to populate or limit the selections in the next drop menu.  This would be done like so:

If in the database there is an entry in row 1 column 1 and the entry is hamburger and the next columns are toppings...say columns 2 and 3...then I need that second drop menu's items to be populated with what is in the 2nd "cheese" column and the 3rd "bacon" columns list to be populated with what is in the 3rd.

You see this code query's an Excel sheet that I'm testing with and the first text field on the form has an autocomplete feature to on show results based off of what the user is tying into the first text field.  So lets say the user enters "ham" into the text box, then hamburger is displayed in the jump menu.  Now if the user highlights "hamburger" in the jump menu, then the options in the menu under that will have only the options of what is in the 2nd column for that row.  So now only "cheese" would be an option.  

and in the 3rd drop menu only "bacon" would be listed because that is what is in the 3rd column in the database.

This is what I have done so far.  

thanks a ton for even looking at this.

<CFQUERY NAME="midata" DATASOURCE="midata">
FROM `Sheet1$`

<link rel="stylesheet" href="cssMain.css" type="text/css" />
<script type="text/javascript">
var arrOpts = new Array();

window.onload = function()

function getOpts(selObj)
  for (var i = 0, n = selObj.options.length; i < n; i ++)
    arrOpts[i] = selObj.options[i].text + "||" + selObj.options[i].value;

function setOpts(val, selObj)
  selObj.options.length = 0;
  for (var i = 0, n = arrOpts.length; i < n; i ++)
    var currPair = arrOpts[i].split("||");
    if (currPair[0].toUpperCase().indexOf(val.toUpperCase()) == 0)
      selObj.options[selObj.options.length] = new Option(currPair[0], currPair[1]);

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  if (restore) selObj.selectedIndex=0;


<body bgcolor="#E7F8E8">
  <table width="580" border="0" cellspacing="2" cellpadding="2">
      <td width="118" class="subHeader"><strong>Description:</strong></td>
      <td width="137"><input name="inputFld" type="text" class="calendarText" onKeyUp="setOpts(this.value, this.form.sel);" /></td>
      <td width="305" rowspan="2"><select name="sel" id="sel" size="5" class="calendarMenu" multiple="multiple" nchange="MM_jumpMenu('parent',this,0)" >
        <cfoutput query="midata">
          <option value="#dd3#">#dd3#</option>
      <td class="subHeader">&nbsp;</td>
      <td class="subHeader"><strong>Sub-Category: </strong></td>
        <select name="select" class="calendarText">
         <cfoutput query="midata">
         <option value="#dd2#">#dd2#</option>
      </select>      </td>
1 Solution
I like to use AJAX for things like this. It's pretty easy -- pass it the value of the first select, and it pulls the appropriate values for the next select and plugs them in. It's much easier to use an existing library for this than to try to roll your own.

The two most commonly used AJAX libraries for ColdFusion are cfAjax and JSMX:


Each has an active user community. There is a cfajax group on Yahoo! groups, and a JSMX group on google groups.

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now