Question

我正在尝试使用基于“公司”下拉列表的选项填充“政策”选择下拉列表。在发现隐藏选项得不到支持后，我更改了我的代码，以便将所有可能的s放在隐藏的div中。当有人单击公司选择时，它会从div中提取相关选项，复制它并将其添加到策略选择中。适用于Opera，FF＆amp; 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中这是html在"#options-bucket"中的样子：

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

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

jQuery＆amp; IE9 - 打破.find（）。each（）

1 个答案: