Using JavaScript and JQuery to dynamically change options in a select element

This is an example of dynamically changing the available options in a select element (drop-down list) using JavaScript and jQuery.

In this example we want to change which suppliers can be selected if the type of export is DRW.  If any type of export is chosen other than DRW, then one set of suppliers will be available in the drop down list.  However, if DRW is chosen as the export type, we want to restrict the available options.

In the HTML form, there’s a select element with id=”supplier”:

<select id="supplier" name="supplier"> </select>

There’s another select element named export_2d:
The onchange=”checkState();” code tells the browser to call the checkState() function when the export_2d option is changed

<select id="export_2d" name="export_2d" onchange="checkState();">
   <option value="" selected>None</option>
   <option value="DXF">DXF</option>
   <option value="DWG">DWG</option>
   <option value="IGS">IGS</option>
   <option value="SET">SET</option>
   <option value="STP">STEP</option>
   <option value="DRW">DRW</option>
</select>

The following 3 JavaScript functions do all the work, checkState(), setupForExport() and setupForSaveAs():

Checks to see what export_2d is selected and calls the appropriate setup function
function checkState() {
   var selValue = $('#export_2d').val(); // gets the currently selected value of the export_2d element
   if (selValue == "DRW") {
      setupForSaveAs(); // set up the form for a Save As operation
   } else {
      setupForNormalExport(); // set up the form for an Export operation
   }
}
function setupForExport() {
   $("#supplier option").remove(); // removes all options from the select element where id="supplier

   // Add these options to the select element where id="supplier"
   $("#supplier").append("<option value='' selected>T:\Export\</option>");
   $("#supplier").append("<option value='88888'>ACME</option>");
   $("#supplier").append("<option value='33333'>Lumber &amp; Wood</option>");
   $("#supplier").append("<option value='99999'>Sam's Widgets</option>");
   $("#supplier").append("<option value='66666'>Natural Plastics</option>");
   $("#supplier").append("<option value='55555'>Java Chillers</option>");
   $("#supplier").append("<option value='00000'>Coffee Technologies</option>");
   $("#supplier").selectedIndex = 0;
}
function setupForSaveAs() {
   $("#supplier option").remove(); // removes all options from the select element where id="supplier
   // Add these options to the select element where id="supplier"
   $("#supplier").append("<option value='' selected>T:\Partials\</option>");
   $("#supplier").append("<option value='00000'>Coffee Technologies</option>");
   $("#supplier").selectedIndex = 0;
}
Advertisements

One thought on “Using JavaScript and JQuery to dynamically change options in a select element

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s