如何禁用已经在另一<选择>
how to disable an option already selected in another <select>?
我有五个值不同的HTML selects
,但选项具有相同的文本。如何比较文本选项而不是值,并在每隔一次选择中禁用相应的选项?例如,如果我有:
<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>
假设用户在最后一个select
中选择了选项test-1
。这将在其他选择中禁用相应的option
。我怎样才能做到这一点?
如果我能正确理解你,这可能就是:
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');
jsFiddle:示例
扩展@IgorDymov的答案(应该归功于他),我可能会这样做(见小提琴):
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');
这样,每次进行新的选择时,我们都会完全刷新选择,这意味着属性将再次重新启用。你会注意到,我减少了选择的数量,增加了选项的数量,这样你就不会陷入同时禁用所有选项的境地,我认为这是最有意义的。
长度示例
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
检查Fiddle
要在当前所选选项的选项标签之间获取文本,您需要执行以下操作:
$('option[value="'+$('select').val()+'"]').text();
它转换为:获取选项的文本,该文本的值与select 中当前列出的值相同
相关文章:
- Div根据<选择>菜单
- 如何更改<选择>使用angularJS从控制器获得的值
- 当<选择的选项>重新选择
- 依赖<选择>HTML和JavaScript菜单
- 选择<李>使用普通JavaScript的子节点,而不是孙节点
- 如何传递相同页面<选择>值到同一页<f: param>
- 渲染<选项值=“;foo”;选择>在服务器上
- <选择>标签不起作用
- 当我有<选择>下拉列表
- 记住<选择>重新加载页面
- <中的链接;选择>下拉选项
- 映射多个<选择>至<输入>
- <上的applyBindings();选择>正在导致我的subscribe()起火,
- 触发器<输入类型=“;文件“>用angular程序选择文件
- 如何动态生成X数量的新<输入>基于a<选择>(Angular2内)
- 为:gt或:lt选择器设置变量零基数
- 用“<选择></选择>"类型
- JQuery.append的</选择>标记被忽略
- 如何从
- 使用lt(3)选择器为每个元素设置不同的背景色