将禁用添加到表格列表中的表单选项
Add disabled to form option that are on the table list
我有一个表格和一个带有下拉列表的表单:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
我想为表格上已有的下拉列表中的每个选项添加一个禁用属性,从而导致以下结果:
<table>
<tr>
<td class="text">Apple</td>
<td class="name">John</td>
</tr>
<tr>
<td class="text">Orange</td>
<td class="name">Smith</td>
</tr>
</table>
<form>
<select>
<option value="Apple" disabled>Apple</option>
<option value="Banana">Banana</option>
<option value="Orange" disabled>Orange</option>
<option value="Grape">Grape</option>
</select>
</form>
有没有办法使用jQuery来实现?
$("td.text").text(function(i, txt) {
$("select option[value='" + $.trim(txt) + "']").prop("disabled", true);
});
演示:http://jsfiddle.net/322PA/
从选择选项中获取每个项目值,并将其与表行内的数据进行比较。如果两者都匹配,则禁用下拉列表/选择元素中的数据/选项。
$(document).ready(function(){
//loop through the select option
$("form > select").children().each(function(){
//store each option to check later
var item = $(this).val();
//loop through table row
$("table").children().each(function(){
//loop through table data
$("tr").children().each(function(){
//compare previously stored item with table data value
if(item == $(this).text()){
//disable option
$("form > select > option:contains(" + item + ")").attr("disabled", "disabled");
}
});
});
});
});
jsFiddle 演示
我猜您将动态更改表的内容,并希望在表更改时更新 select 元素。因此,必须确保每次使用时都会更新它。
$("#theSelector").bind("mouseenter", disableOptions);
function disableOptions() {
var tableData = [];
$("#theTable tr").each(function() {
tableData.push($(this).children(":first").text());
});
$("#theSelector option").each(
function() {
if(jQuery.inArray(this.text, tableData) > -1) {
$(this).prop('disabled', true);
}
}
);
}
相关文章:
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- HTML表单选项(是或否)然后下拉文本区域
- 在单选按钮表单选项上附加链接
- 使用 jquery 选择选项时隐藏表单选项
- 将禁用添加到表格列表中的表单选项
- 如何在提交时捕获表单选项
- jQuery - 填充下拉表单选项值
- JavaScript 选择表单选项
- 我想在下拉列表的最后一个选项被选中时提交表单.选项是动态生成的
- 如何构建带有单个附件的联系人表单选项到带有多个附件的选项
- 访问多个表单选项
- 突出显示html中下拉表单选项的当前选定选项
- 在页面加载时选择表单选项
- 使用javascript命令随机表单选项
- Javascript表单选项值拆分为两个不同的输入值
- Lightbox杀死javascript表单选项
- 传递一个
- 通过JS或jQuery的函数更改表单选项
- 如何用jquery隐藏表单选项
- 使用Javascript或HTML根据以前的表单答案更改表单选项