如果已经选择,禁用选择选项
Disable Select Option if already selected
我已经创建了一个表,如果所有的文本框都被填满,并且select
在前一行被更改,则该表将克隆其最后一行。我试图添加一个条件,如果新下拉选项已经在前几行中被选中,则应该禁用它们。
Demo Fillde
disable option code:
$('select').change(function() {
var value = $(this).val();
$(this).siblings('select').children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});
});
全JS:
$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select class="dd" name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option><option value="test2">test 2</option></select></td> <td> <input type="text" name="renewal_by1" id="renewal_by1" /> </td> <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>'
);
$('select').change(function() {
var value = $(this).val();
$(this).siblings('select').children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});
});
$('#results').on('focus', ':input', function() {
$(this).closest('tr').filter(function() {
return !$(this).data('saved');
})
.find(':input').each(function() {
$(this).data('value', this.value);
$(this).closest('tr').data('saved', true);
});
})
.on('input change', ':input', function() {
$(this).data('filled', this.value != $(this).data('value'))
var tr = $(this).closest('tr');
all = tr.find(':input'),
fld = all.filter(function() {
return $(this).data('filled');
});
if( all.length == fld.length ) {
if( !tr.data('done') ) {
$('#buttonclck')[0].click();
tr.data('done', true);
}
} else {
if( tr.data('done') ) {
tr.data('done', false);
}
}
});
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
var lastRowInputs = lastRow.find('input');
var isClone = false;
lastRowInputs.each(function() {
if($(this).val().length) {
isClone = true;
}
});
if(!isClone)
return false;
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)('d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
});
HTML: <div id="results"></div>
<input id="buttonclck" type="button" class="hide" value="button"/>
你的错误在这里:
$(this).siblings('select').children('option').each(function() { ... }
应该是:
$(this).children('option').each(function() { ... }
为什么选择select
元素的siblings
?您应该直接下降到它的选项。我不知道它是否有意为之,但是这样的代码将使option
在两行中禁用:以前的和新生成的。
小提琴来了:
http://jsfiddle.net/99pvwypp/19/相关文章:
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素