[英]how to disable an option already selected in another <select>?
I have five HTML selects
with different values, but the options have the same text. 我有五个具有不同值的HTML
selects
,但是选项具有相同的文本。 How do I compare the text options, instead of the values, and disable the the respective option in every other select? 如何比较文本选项(而不是值),并在其他所有选择中禁用相应的选项? For example, if I have:
例如,如果我有:
<select name="options[70]" id="select_70">
<option value="1" price="0"> test-1 </option>
<option value="2" price="0"> test-2 </option>
<option value="3" price="0"> test-3 </option>
</select>
<select name="options[71]" id="select_71">
<option value="4" price="0"> test-1 </option>
<option value="5" price="0"> test-2 </option>
<option value="6" price="0"> test-3 </option>
</select>
<select name="options[72]" id="select_72">
<option value="7" price="0"> test-1 </option>
<option value="8" price="0"> test-2 </option>
<option value="9" price="0"> test-3 </option>
</select>
<select name="options[73]" id="select_73">
<option value="10" price="0"> test-1 </option>
<option value="11" price="0"> test-2 </option>
<option value="12" price="0"> test-3 </option>
</select>
<select name="options[74]" id="select_74">
<option value="13" price="0"> test-1 </option>
<option value="14" price="0"> test-2 </option>
<option value="15" price="0"> test-3 </option>
</select>
Suppose the user selects the option test-1
in the last select
. 假设用户在最后一个
select
选择了test-1
select
。 This should disable the corresponding option
in the other selects. 这应该禁用其他选择中的相应
option
。 How can I achieve that? 我该如何实现?
If I understand you properly, this might be it: 如果我对您的理解正确,可能是这样的:
var $selects = $('select');
$selects.on('change', function() {
var $select = $(this),
$options = $selects.not($select).find('option'),
selectedText = $select.children('option:selected').text();
var $optionsToDisable = $options.filter(function() {
return $(this).text() == selectedText;
});
$optionsToDisable.prop('disabled', true);
});
//to apply initial selection
$selects.eq(0).trigger('change');
Expanding on @IgorDymov's answer (credit should go to him), here's probably what I'd do (see fiddle ): 扩展@IgorDymov的答案(信用应该归他所有),这可能是我要做的(请参阅fiddle ):
var $selects = $('select');
$selects.on('change', function() {
$("option", $selects).prop("disabled", false);
$selects.each(function() {
var $select = $(this),
$options = $selects.not($select).find('option'),
selectedText = $select.children('option:selected').text();
$options.each(function() {
if($(this).text() == selectedText) $(this).prop("disabled", true);
});
});
});
$selects.eq(0).trigger('change');
That way we completely refresh the selections each time a new one is made, which means properties become re-enabled again. 这样,每次进行新选择时,我们都会完全刷新选择,这意味着将再次重新启用属性。 You'll notice in the fiddle I reduced the number of selects and increased the number of options so that you don't get trapped in a situation where all options are disabled at the same time, I think that makes most sense.
您会注意到,我减少了选择的数量,增加了选项的数量,这样您就不会陷入同时禁用所有选项的情况,这是最有意义的。
A length example 长度示例
var $selects = $('select');
available = {};
// Get the text of options from the dropdown
// and store in a object hash
$('option', $selects.eq(0)).each(function (i) {
var val = $.trim($(this).text());
available[val] = false;
});
$selects.change(function () {
var $this = $(this);
var selectedVal = $.trim($this.find('option:selected').text());
// set that value to true
available[selectedVal] = true;
$selects.not(this).each(function () {
$('option', this).each(function () {
var optText = $.trim($(this).text()),
optCheck = available[optText];
$(this).prop('disabled', optCheck );
});
});
}).change(); // Trigger once to add options at load of first choice
To get the text in between the option tags of the currently selected option you would do this: 要使文本位于当前选定选项的选项标签之间,请执行以下操作:
$('option[value="'+$('select').val()+'"]').text();
it translates to: get text of option with a value that is the same as the currently listed value in the select 它转换为:获取选项文本,其值与select中当前列出的值相同
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.