javascript - jQuery 代码在 Firefox 中工作但在 Chrome 和 IE8 中失败

Question

我已经为以下目的编写了一个 jquery 代码: 有一个字段列表和一个子字段列表。当用户点击一个字段时，将显示相关的子字段。两个列表都是多重启用的 <select> .

这是 JS FIDDLE(用 FF 探索它有效，但用 chrome 失败)

http://jsfiddle.net/mostafatalebi/WUR7F/

我使用最新版本的 Chrome、Firefox 和 IE8。此代码适用于 Firefox，但适用于其他两个。

这是 jquery 代码:

$(document).ready(function(){
    $('select[name="branch[]"]').change(function () {
        var $branch = $(this).children(':selected'),
            $subbranch = $('[name="subbranch[]"]').children('option');

        $subbranch.hide()

        $branch.each(function () {
            var branch = $(this).val();
            $subbranch.each(function () {
                if ($(this).attr("id") == "par"+branch) {
                    $(this).show();
                }
            });
        });
    }).change();
});

这里是应用了 jquery 的 HTML(用于 Mother-Fields):

<option selected value="false">Please Select the Field:</option>
<?php
    $db->where("parent", 1);
    $db->where("type", 1); // means institute
    $branches = $db->get("fields")->result_array();
    $brancc =  count($branches);
    for($i=0; $i < $brancc; $i++)
    {
        ?>
        <option class='branch-item' value="<?php echo $branches[$i]['id']; ?>" >
        <?php echo $branches[$i]['title']; ?></option>
        <?php
    }
?>
</select><br />

这是应用了 jquery 的 HTML(子字段):

<select multiple class="form-option-multiple" name="subbranch[]">
<?php
    $db->where("parent", 0);
    $db->where("type", 1); // means institute
    $suboptions = $db->get("fields")->result_array();
    $suboptionscc = count($suboptions);

    for($i=0; $i < $suboptionscc; $i++) {
        ?>
        <option class='subbranch-item' id='par<?php echo $suboptions[$i]['parent_id']; ?>'
        value="<?php echo $suboptions[$i]['id']; ?>" ><?php echo $suboptions[$i]['title']; ?></option>
        <?php
    }
?>
</select>
<br />

这两个列表最初都填充了从数据库中检索到的数据。

Answer 1

两件事:

1. 您的许多子分支选项具有相同的 DOM id。 DOM id 在文档中应该是唯一的。我已将您的代码更改为使用一个类:jsFiddle

   if ($(this).hasClass("par"+branch)) {
   

2. 问题是您试图通过设置 display: none 隐藏多选选项。 Chrome 和 IE 都不支持。您将不得不添加和删除选项。

我已经构建了第二个 fiddle :jsFiddle

我添加了第三个不可见的 select 来保存所有生成的选项。每当用户更改分支时，我们都会清除子分支 select 并将所有匹配选项从隐藏的三分之一复制到其中。