Question

我有一个基本形式，按动物类型过滤，（＆＃39;哺乳动物＆＃39;显示＆＃39;狗＆＃39;＆＃39;松鼠＆＃39;等）。但是，我还需要使用多种选择，同时选择“哺乳动物”和“哺乳动物”。和＃39; Bird＆＃39;会显示合并的结果（＆＃39; Dog＆＃39;，＆＃39; Squirrel＆＃39; Hawk＆＃39;）而不是只替换另一个。

以下是我正在使用的代码。任何帮助表示赞赏！感谢。

＆＃13;

$('select#list').change(function() {
    var target = $(this).data('target');
    $(target).children().addClass('hide');
    var show = $("option:selected", this).data('show');
    $(show).removeClass('hide');
});

＆＃13;

.hide {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="list" multiple="multiple" data-target=".my-info-1">
  <option value="32" data-show=".Mam">Mammals</option>
  <option value="3" data-show=".Bird">Birds</option>
  <option value="4">Reptiles</option>
</select>
<select id="butts" class="my-info-1" multiple="multiple">
  <option class="Mam hide">Squirrel</option>
  <option class="Mam hide">Dog</option>
  <option class="Bird hide">Hawk</option>
  <option class="hss hide">Snake</option>
</select>

＆＃13;

Answer 1

将所有选定选项的data-show转换为以逗号分隔的列表：

$('select#list').change(function() {
    var target = $(this).data('target'),
        show = $("option:selected", this).map(function () {
            return $(this).data('show');
        }).get().join(",");

    $("#debug").text(show);

    $(target).children().addClass('hide').filter(show).removeClass('hide');
});

select {
    width: 100px;
    height: 100px;
}
.hide {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="list" multiple="multiple" data-target=".my-info-1">
  <option value="32" data-show=".Mam">Mammals</option>
  <option value="3" data-show=".Bird">Birds</option>
  <option value="4" data-show=".hss">Reptiles</option>
</select>
<select id="butts" class="my-info-1" multiple="multiple">
  <option class="Mam hide">Squirrel</option>
  <option class="Mam hide">Dog</option>
  <option class="Bird hide">Hawk</option>
  <option class="hss hide">Snake</option>
</select>

<p id="debug"></p>

需要帮助获取级联表单进行多项选择？

1 个答案: