我有一个这样的 HTML 表单:
所有下拉列表都包含相同的列表:选项 1、选项 2、选项 3
,用户需要为每个键选择一个值。这按预期工作,不用担心:
但是,我想增强它。 Keys
和 Options List
都可以变得相对较大(比如 20)。预计会有一对一的映射,您不能在两个地方选择一个值。但是当列表很大的时候,就很容易出错,在两个地方选择相同的值。我们会进行一些客户端验证来检查重复项,但我更希望通过从其他下拉列表中删除所选选项,以便无法再次选择 来提供用户体验。像这样:
我该怎么做?
最终解决方案
我最初选择了 Knockout 解决方案,但转念一想,我更喜欢 Rick Hitchcock 的普通 JQuery 解决方案,因为我可以轻松地将它插入任何地方而无需任何额外设置。以下是我如何修改 Rick 的解决方案以提高可重用性:
function reducingDropdowns(dropDownSelector){
var $dropdowns = $(dropDownSelector);
$dropdowns.change(function() {
// First enable all options.
$dropdowns.find('option').prop('disabled', false);
// Then for each dropdown, get its current value and
// disable that option in other dropdowns.
$dropdowns.each(function() {
var $currDropdown= $(this);
var currDropdownValue= $currDropdown.val();
if(currDropdownValue !== ''){
var $otherDropdowns = $dropdowns.not($currDropdown);
$otherDropdowns.find('option').each(function() {
var $option = $(this);
var optionIsAlreadySelected = $option.val() === currDropdownValue;
if(optionIsAlreadySelected)
$option.prop('disabled', true);
});
}
});
});
}
现在你可以给所有相关的下拉菜单一个通用的类,然后在任何你需要的地方调用这样的东西:
reducingDropdowns('.myDropdownClass');
谢谢大家的帮助。
PS:我还意识到,对于我的应用程序,我更愿意禁用已经使用的选项,而不是将它们从列表中完全删除。
最佳答案
这是一种非常简单的方法,可以提高效率,但这是基本思想:
HTML
<select data-bind="value: value1, options: options1, optionsCaption: ''"></select>
<select data-bind="value: value2, options: options2, optionsCaption: ''"></select>
<select data-bind="value: value3, options: options3, optionsCaption: ''"></select>
查看模型
var self = this;
this.options = ko.observableArray(['Option 1', 'Option 2', 'Option 3']);
this.value1 = ko.observable();
this.value2 = ko.observable();
this.value3 = ko.observable();
this.options1 = ko.computed(function() {
return ko.utils.arrayFilter(this.options(), function(f) {
return f != self.value2() && f != self.value3();
});
}, this);
this.options2 = ko.computed(function() {
return ko.utils.arrayFilter(this.options(), function(f) {
return f != self.value1() && f != self.value3();
});
}, this);
this.options3 = ko.computed(function() {
return ko.utils.arrayFilter(this.options(), function(f) {
return f != self.value1() && f != self.value2();
});
}, this);
关于javascript - 如何创建一组下拉列表,其中列表会随着您的选择而减少?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29109771/