[英]jQuery Chosen: select 1 option and deselect the same option in another select menu
I have two same selects which use last version of jQuery Chosen plugin . 我有两个相同的选择,它们使用jQuery Chosen插件的最新版本。 What i want to achieve is if you select option in first select, disable this option in second select and vice versa. 我要实现的是,如果您在第一选择中选择了选项,则在第二选择中禁用了该选项,反之亦然。 I tried to solve it with jQuery prop method, but it doesn't work. 我试图用jQuery prop方法解决它,但是它不起作用。
Here is code: 这是代码:
http://jsfiddle.net/aksvuy9q/ http://jsfiddle.net/aksvuy9q/
<select data-placeholder= "Keyword" multiple style="width:300px;" name="keywordContainSelect" multiple class="selectKeyword">
<option value=""> </option>
<option value="1">apartments</option>
<option value="2">edward</option>
<option value="3">shutters</option>
<option value="4">sprtsmen</option>
<option value="5">dinner</option>
<option value="6">bachelor</option>
<option value="7">remember</option>
<option value="8">pleasant</option>
<option value="9">connection</option>
<option value="10">instrument</option>
<option value="11">preference</option>
<option value="12">valley</option>
<option value="13">dashwoods</option>
<option value="14">marriage</option>
<option value="15">literature</option>
<option value="16">imprudence</option>
<option value="17">cottage</option>
<option value="18">ferrars</option>
<option value="19">gentleman</option>
<option value="20">sweetness</option>
<option value="21">barton</option>
<option value="22">provision</option>
<option value="23">account</option>
<option value="24">daughter</option>
<option value="25">goodness</option>
<option value="26">songs</option>
<option value="27">view</option>
<option value="28">assure</option>
<option value="29">extremity</option>
</select>
<script>
$("select[name=keywordContainSelect]").chosen();
</script>
<select data-placeholder= "Keyword" multiple style="width:300px;" name="keywordNotContainSelect" multiple class="selectKeyword">
<option value=""> </option>
<option value="1">apartments</option>
<option value="2">edward</option>
<option value="3">shutters</option>
<option value="4">sprtsmen</option>
<option value="5">dinner</option>
<option value="6">bachelor</option>
<option value="7">remember</option>
<option value="8">pleasant</option>
<option value="9">connection</option>
<option value="10">instrument</option>
<option value="11">preference</option>
<option value="12">valley</option>
<option value="13">dashwoods</option>
<option value="14">marriage</option>
<option value="15">literature</option>
<option value="16">imprudence</option>
<option value="17">cottage</option>
<option value="18">ferrars</option>
<option value="19">gentleman</option>
<option value="20">sweetness</option>
<option value="21">barton</option>
<option value="22">provision</option>
<option value="23">account</option>
<option value="24">daughter</option>
<option value="25">goodness</option>
<option value="26">songs</option>
<option value="27">view</option>
<option value="28">assure</option>
<option value="29">extremity</option>
</select>
<script>
$("select[name=keywordNotContainSelect]").chosen();
$("select[name=keywordContainSelect]").on('change', function(evt, params) {
var valSel = params.selected;
var valDeSel = params.deselected;
if (valSel > 0){
$('select[name=keywordNotContainSelect] option[value='+valSel+']').prop("disabled", true);
}
if (valDeSel > 0)
$('select[name=keywordNotContainSelect] option[value='+valSel+']').prop("disabled", false);
});
$("select[name=keywordNotContainSelect]").on('change', function(evt, params) {
var valSel = params.selected;
var valDeSel = params.deselected;
if (valSel > 0)
$('select[name=keywordContainSelect] option[value='+valSel+']').prop("disabled", true);
if (valDeSel > 0)
$('select[name=keywordContainSelect] option[value='+valSel+']').prop("disabled", false);
});
</script>
The same question and solution is here , but the solution doesn't work with new version of jQuery Chosen plugin. 相同的问题和解决方案在这里 ,但是该解决方案不适用于新版本的jQuery Chosen插件。
Here you are http://jsfiddle.net/aksvuy9q/2/ 您在这里http://jsfiddle.net/aksvuy9q/2/
$(".selectKeyword").chosen().change( function() {
var selectedValue = $(this).find('option:selected').val();
$(".selectKeyword").find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled');
$(".selectKeyword").trigger("chosen:updated");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.