问题
I have a very long list of options in two multiple select box, I want to populate dynamically the options for select_B
based on select_A
, for instance:
I multiple select opt1 and opt2 from select_A
, select_B
will show the options which is optgroup with id=sub1
and id=sub2
only, if I deselect opt1 and select opt3 from select_A
, select_B
will remove optgroup sub1
and remain sub2
and sub3
, and so on with flexibility of control.
<select id="select_A" multiple="multiple" size="10">
<optgroup label="group 1">
<option value="opt1" id="main1">opt1</option>
<option value="opt2" id="main2">opt2</option>
<optgroup label="group 2">
<option value="opt3" id="main3">opt3</option>
</select>
<select id="select_B" multiple="multiple" size="10">
<optgroup label="opt1" id="sub1" style="display:none;">
<option value="1A">1A</option>
<option value="1B">1B</option>
<optgroup label="opt2" id="sub2" style="display:none;">
<option value="2A">2A</option>
<option value="2B">2B</option>
<optgroup label="opt3" id="sub3" style="display:none;">
<option value="3A">3A</option>
<option value="3B">3B</option>
</select>
I already have a solution for hiding optgroup in Chrome and IE from here:
<script>
$(document).ready(function() {
$.fn.hideOptionGroup = function() {
$(this).hide();
$(this).children().each(function(){
$(this).attr("disabled", "disabled").removeAttr("selected");
});
$(this).appendTo($(this).parent());
}
$.fn.showOptionGroup = function() {
$(this).show();
$(this).children().each(function(){
$(this).removeAttr("disabled");
});
$(this).prependTo($(this).parent());
$(this).parent().animate({scrollTop:0},0);
}
$("#sub1,#sub2").showOptionGroup();
$("#sub1,#sub2").hideOptionGroup();
});
</script>
Please help and thanks.
回答1:
See this: Sample
$("#select_A").change(function () {
$("#select_B").children("optgroup").children().prop("disabled", "disabled").prop("selected", false);
var arr = $(this).val();
for (var i = 0; i < arr.length; i++) {
$("#select_B").children("optgroup[label=" + arr[i] + "]").children().prop("disabled",false).prop("selected", "selected");
}
$("#select_B").focus();
});
来源:https://stackoverflow.com/questions/15155086/jquery-populate-optgroup-for-second-selectbox-dynamically