Douglas on Web Applications

Dropdown (Pulldown) Selectors & Manipulation

Clear a current dropdown selection

    $("#some-id-on-option option").attr({ selected: "selected" }).removeAttr("selected");

Now, select an option

    $("#some-id-on-option option:first").attr("selected");

That selects the first option. Or you can specify an option by index:

    $("#some-id-on-option eq:(2)").attr("selected");

However, that only selects the item but doesn't execute if there is an action (via listener) associated with that particular dropdown. To do so, use the following:

    $("#some-id-on-option").change();

Here's a real-world example. Let's say you have 3 dropdown menus. The first selects between two states and depending on the selection, one of two location dropdown menus will be displayed. The location dropdowns allow a user to select specific store in that state. By default, on page load one location dropdown will be hidden. Here is the code for the State dropdown menu:

$("#select-state").change( function () {
  //alert($(this).val())
  $("#locations-az").toggle();
  $("#locations-ca").toggle();
  $(".sLocations option").removeAttr("selected")
  if($(this).val()==1){ //cal
    $("#locations-ca option:eq(0)").attr("selected","selected");
	$("#select-locations-ca").change();
  }else{
    $("#locations-az option:eq(0)").attr("selected","selected");
	$("#select-locations-az").change();
  }
});

This ensures that the location dropdowns always revert back to the first option when the state dropdown is toggled. Notice the last line "$(this).change()". This executes the following listener on the active locations pulldown:

  $(".sLocations").change( function () { //we're using class in this case
      var newSrc =$(this).val();
      $('iframe#replace-iframe').replaceWith(newSrc);
  });

This takes the value on the location dropdown and replaces the current iFrame on the page with it. Because we are inserting Google Maps, we'll replace the whole iFrame rather than just trying to update it in order to avoid caching issues. Here's the HTML:

 
<select id="select-state" name="state">
    <option value="1">California</option>
    <option value="2">Arizona</option>
 </select>
<select id="select-locations-az" class="sLocations" name="selectlocations-az">
<option value="&lt;iframe  class=&quot;def-selection&quot; id=&quot;replace-iframe&quot; width=&quot;878&quot; height=&quot;600&quot;
 frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;  src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot; mce_src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot;&gt;&lt;/iframe&gt;">Ahwatukee - 4623 E. Elliot Rd.</option>...(cont)
</select>
 

Tags: dropdown, jQuery, select, selectors