jQuery 和IE9 - .find().each() 中断

Question

我正在尝试使用基于“公司”下拉列表的选项填充“策略”选择下拉列表。在发现隐藏选项的支持很差之后，我更改了代码，以便将所有可能的 s 放置在隐藏的 div 中。当有人单击“公司”选择时，它会从 div 中提取关联的选项，复制它并将其添加到“策略”选择中。在 Opera、FF 和 FF 中运行良好Chrome，但在 IE9（Windows）中崩溃。

在 IE 调试器中浏览它，看起来它在第 8 行中断：

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

我让它在 jsfiddle 中工作（http://jsfiddle.net/doub1ejack/2xSN5/1/）。这也是代码。这是我第一次遇到 jQuery 的兼容性问题。让我想知道是否还有别的东西......谢谢！

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');
});

标记：

<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

选项元素不属于 div 下，在 IE 中，这就是 "#options-bucket" 中 html 的样子：

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

不过您不需要它，这可以工作，例如：

$('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');
});

< a href="http://jsfiddle.net/2xSN5/2/" rel="nofollow">http://jsfiddle.net/2xSN5/2/