Question

I’m trying to populate a ‘Policy’ select dropdown with options based on the ‘Company’ dropdown. After discovering that hiding options is poorly supported, I changed my code so that all possible s are placed in a hidden div. When someone clicks the Company select, it pulls the associated option from the div, copies it and adds it to the Policy select. Works well in Opera, FF & Chrome but breaks in IE9 (windows).

Walking through it in the IE debugger, it looks like it breaks on the 8th line:

bucket.find('option').each(function(){

I have it working in a jsfiddle (http://jsfiddle.net/doub1ejack/2xSN5/1/). Here’s the code too. This is the first time I have come across a compatability problem with jQuery. Makes me wonder if it’s something else.. Thanks!

JS:

// behavior for select dropdowns
$('select.company').change(function(){
    var num = $(this).attr('selectbox');
    var coid = $(this).val();
    var policy = $('select#policy_'+num);
    var bucket = $('#options-bucket');

    policy.removeAttr('disabled');
    policy.find('option').not('.default').remove();
    bucket.find('option').each(function(){
        var poco = $(this).attr('company');             
        if(poco == coid) { // if policy belongs to selected company..
            var option = $(this).clone();
            policy.append( option );
        }
    });
    policy.find('option.default').attr('selected','selected');
});

Markup:

<form action="/index.php/auto-insurance-comparison" method="post" id="policy-selection">
  <select name="company_1" id="company_1" selectbox="1" class="company">
    <option value=""> </option>
    <option value="2">Progressive</option>
    <option value="3">GEICO Insurance Company</option>
  </select>
  <select name="policy_1" id="policy_1" class="policy" disabled="disabled">
    <option value="" class="default"> </option>
  </select>
  <br>
  <input type="hidden" name="hidden-submit" value="true">
  <input type="submit" class="button" value="Compare Policies">
</form>

<div id="options-bucket">
  <option value="1" company="3"> TPAP </option>
  <option value="2" company="2"> 9610A </option>
  <option value="4" company="3"> HOMA </option>
</div>

Answer 1

Option elements don’t belong under a div, in IE this is what the html looks like in "#options-bucket":

<div id="options-bucket">
    ---TEXT -       TPAP        9610A       HOMA

You don’t need it for anything though, this works for example:

$('select.company').change(function() {
    var num = $(this).attr('selectbox');
    var coid = $(this).val();
    var policy = $('select#policy_' + num);
    var policies = {
        "3": [{
            text: "TPAP",
            value: 1},
        {
            text: "HOMA",
            value: 4}],
        "2": [{
            text: "9610A",
            value: 2}]
    };

    policy.prop("disabled", false);
    policy.find('option').not('.default').remove();
    $.each(policies[coid], function() {
        policy.append("<option value=\"" + this.value + "\">" + this.text + "</option>");
    });

    policy.find('option.default').attr('selected', 'selected');
});

http://jsfiddle.net/2xSN5/2/