Question

我有以下HTML包含各种多选框 -

 <p>
 <label>Main Category</label>
 <select id="mainSelect" name="super_category" multiple>
    <option value="CatA">CatA</option>
    <option value="CatB">CatB</option>
 </select>
 </p>
 <p>
 <label>SubCategoryA</label>
 <select class="multiselectbox" name="super_subcategory_CatA" multiple>
     <option value="SubcatA1">SubcatA1</option>
     <option value="SubcatA2">SubcatA2</option>
 </select>
 </p>
<p>
<label>SubCategoryB</label>
<select class="multiselectbox" name="contact_subcategory_CatB" multiple>
     <option value="SubcatB1">SubcatB1</option>
     <option value="SubcatB2">SubcatB2</option>
</select>
</p>

我正在尝试创建动态jquery代码，如果我从subcategory_X多选字段中选择任何选项，则应在super_category multiselect中选择相同的子类别

同样，当我从super_category多选中取消选择任何子类别_X时，应取消选择特定subcategory_X多选中的任何/所有选项。

尝试使用Jquery执行此操作但我是新手。正在考虑在onchange事件上执行此操作，以便如果从任何多选中选择/取消选择任何选项，则在“super_category”多选中选择相应的“类别”，或者从“子类别”中取消选择所有值自己的多选。

希望我没有混淆任何一个。对此的任何帮助将不胜感激。

提前致谢。

编辑：JSfiddle链接http://jsfiddle.net/M53JX/

Answer 1

试试这个

$(document).ready(function () {
    $('#mainSelect').on('change', function () {
        $("select[name^=contact_subcategory] option").prop("selected", "");
        var name = $(this).val(); alert(name);
        $(name).each(function() {
            $("select[name=contact_subcategory_" +this  + "] option").prop("selected", "selected"); 
        })

    });
});

FIDDLE

根据另一个多选的选择，在一个多选字段中选择/取消选择选项

1 个答案: