jQuery & IE9 - разбивает на .find (). each () - PullRequest
Новая
       3

jQuery & IE9 - разбивает на .find (). each ()

0 голосов
/ 24 декабря 2011

Я пытаюсь заполнить раскрывающийся список «Политика» параметрами, основанными на раскрывающемся списке «Компания». Обнаружив, что скрытые параметры плохо поддерживаются, я изменил свой код так, чтобы все возможные s были помещены в скрытый div. Когда кто-то щелкает «Выбор компании», он извлекает соответствующий параметр из div, копирует его и добавляет его в «Выбор политики». Хорошо работает в Opera, 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');
});

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>

1 Ответ

2 голосов
/ 24 декабря 2011

Элементы option не принадлежат 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/

...