Question

I’m trying to create a simple chained (http://www.appelsiini.net/projects/chained) select box that ends in calling a page, and have used two snippets of code found on this site, but i’m having real trouble combining the two.
Here’s my script:

$(function() { 
 $("#classifications").chained("#rounds");
    $("#classifications").change(function(){
  $("#result").load( $(this).val() );
});
});

and my html:

<select id="rounds">
<option value="">select round</option>
  <option value="metric">Metric</option>
  <option value="imperial">Imperial</option>
</select>
<select id="classifications">
  <option value="">Select Classification</option>
  <option value="test1.html" class="metric">Gents Metric</option>
  <option  value="test2.html" class="metric">Ladies Metric</option>
  <option  value="test3.html" class="metric">Juniors Metric</option>
  <option value="test5.html" class="imperial">Gents Imperial</option>
  <option value="test6.html" class="imperial">Ladies Imperial</option>
  <option value="test4.html" class="imperial">Juniors Imperial</option>
</select>
<div id="result"></div>

It should be straightforward but I can’t find where i’m going wrong? It works but results in the select boxes being repeated.
Thanks

Answer 1

In the chained() plugin, try commenting out line 54 from the source which should be:

$(self).trigger("change");

I did that and everything works as expected. I haven’t expanded it to more than 2 selects so if that’s something you need, you should work through that.