我有以下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/
答案 0 :(得分:0)
试试这个
$(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");
})
});
});