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

Posted on 2006-05-11
Last Modified: 2013-12-24
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>
Question by:inverted_2000
    1 Comment
    LVL 3

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Network it in WD Red

    There's an industry-leading WD Red drive for every compatible NAS system to help fulfill your data storage needs. With drives up to 8TB, WD Red offers a wide array of solutions for customers looking to build the biggest, best-performing NAS storage solution.  

    In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
    If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
    how to add IIS SMTP to handle application/Scanner relays into office 365.
    Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now