我在 Jquery Mobile
中有两个具有相同数据选项的选择框
。在开始时,当我初始化页面时,我动态地构建它们:
var first = document.getElementById("selectBoxFirst");
var second = document.getElementById("selectBoxSecond");
for (var i = 0; i < this.data.length; i++)
{
first.options[i] = new Option(this.data[i].option, this.data[i].optionId);
second.options[i] = new Option(this.data[i].option, this.data[i].optionID);
}
我尝试做下一件事:当用户在一个选择框中选择一个选项时,该选项将在第二个选择框中被删除...... 如果您再次选择不同的选项,那么最后一个选项将从第二个选项中删除,并显示之前的选项,依此类推...
有什么想法如何实现吗?
最佳答案
您可以选择隐藏或禁用所选选项。
隐藏所选选项:(这可能不适用于旧浏览器)
CSS:
.hide { display: none; }
JS
$('#first').on('change', function () { $('select option.hide').removeClass('hide'); var sel = $('option:selected', this).index(); $('#second option:eq("' + sel + '")').addClass('hide'); }); $('#second').on('change', function () { $('select option.hide').removeClass('hide'); var sel = $('option:selected', this).index(); $('#first option:eq("' + sel + '")').addClass('hide'); });
<小时/>
禁用所选选项: (这不适用于 IE7 及更早版本)
JS
$('#first').on('change', function () { $('select option:disabled').prop('disabled', false); var sel = $('option:selected', this).index(); $('#second option:eq("' + sel + '")').prop('disabled', true); }); $('#second').on('change', function () { $('select option:disabled').prop('disabled', false); var sel = $('option:selected', this).index(); $('#first option:eq("' + sel + '")').prop('disabled', true); });
关于javascript - 从选择框中动态删除在其他选择框中选择的选项,,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19376936/