我有一个在这里显示这个问题的小提琴：http: //jsfiddle.net/jrwarwick/XEg4K/
请忽略 a) 菜单最初没有隐藏并出现在错误位置的问题，这是不相关的。b）由于某种未知原因，多选无法处理该小提琴。
问题：当这样重复多选组件时，我遇到了问题。如果单击下部多选的复选框/单选按钮，它将按预期工作。但是，如果您单击标签而不是复选框/单选，则第一个多选会接收事件而不是打开的事件，并且第一个多选会用实际单击的多选选项的相应索引值覆盖其值！
有没有可能的解决方法？或者我应该把它放在 Eric Hynds 错误跟踪器上吗？
谢谢。
代码：
<div class="form-horizontal" style="position: relative">
<div class="control-group">
<h4 style="margin-left: 10px;">Characteristics</h4>
<div id="characterisitics" data-bind="with: d">
<div data-bind="foreach: Rows" class="control-group">
<label class="control-label" data-bind="text: name"></label>
<div class="controls">
<label class="label" for="ddlContent" style="min-width: 60px; text-align: right" data-bind="text: typename"></label>
<select id="ddlContent" class="input-medium" data-bind="multiSelectCheck:true, minWidth: 150, multiple: typename=='List', selectedOptions: values, header: false, options: TypeContent, optionsText: 'name', optionsValue: 'cvalue'" multiple="multiple">
</select>
<input type="text" class="input-large" maxlength="50" data-bind="value: $parent['type' + location]" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
ko.utils.unwrapObservable(allBindingsAccessor().multiselectOptions) || {};
// pass the original options to the similar widget option
if (ko.utils.unwrapObservable(allBindingsAccessor().optionsCaption)) {
multiselectOptions.noneSelectedText = ko.utils.unwrapObservable(allBindingsAccessor().optionsCaption);
}
if (ko.utils.unwrapObservable(allBindingsAccessor().header) === false) {
multiselectOptions.header = false;
}
multiselectOptions.multiple = ko.utils.unwrapObservable(allBindingsAccessor().multiple);
multiselectOptions.minWidth = ko.utils.unwrapObservable(allBindingsAccessor().minWidth);
allBindingsAccessor().optionsCaption = '';
$(element).multiselect(multiselectOptions);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).multiselect("destroy");
});
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever the associated observable changes value.
// Update the DOM element based on the supplied values here.
var multiselectOptions = ko.utils.unwrapObservable(allBindingsAccessor().multiSelectCheck);
// remove this and use the widget's
// pass the original options to the similar widget option
allBindingsAccessor().optionsCaption = '';
ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
setTimeout(function () {
$(element).multiselect("refresh");
}, 0);
}
};
var data = { "d": {
"type1": ko.observable(),
"type2": ko.observable(),
"type3": ko.observable(),
"Rows": [
{
"id": 26,
"catid": 24,
"name": "Processor Type",
"location": 1,
"type": 1,
"typename": "Text",
"TypeContent": [
{
"id": 195,
"name": "Celeron",
"cvalue": "Celeron",
"location": 7,
"name_fixed": "celeron laptops",
"typeid": 26
},
{
"id": 196,
"name": "Athlon",
"cvalue": "Athlon",
"location": 8,
"name_fixed": "athlon laptops",
"typeid": 26
},
{
"id": 599,
"name": "Centrino",
"cvalue": "Centrino",
"location": 9,
"name_fixed": "centrino laptops",
"typeid": 26
},
{
"id": 772,
"name": "PowerPC G4",
"cvalue": "PowerPC G4",
"location": 10,
"name_fixed": "powerpc g4 laptops",
"typeid": 26
},
{
"id": 969,
"name": "Sempron",
"cvalue": "Sempron",
"location": 11,
"name_fixed": "sempron laptops",
"typeid": 26
},
{
"id": 970,
"name": "Turion 64",
"cvalue": "Turion 64",
"location": 12,
"name_fixed": "turion 64 laptops",
"typeid": 26
},
{
"id": 2714,
"name": "Intel Dual Core",
"cvalue": "Intel Dual Core",
"location": 13,
"name_fixed": "intel dual core laptops",
"typeid": 26
},
{
"id": 3472,
"name": "Intel Core Duo",
"cvalue": "Intel Core Duo",
"location": 14,
"name_fixed": "intel core duo laptops",
"typeid": 26
},
{
"id": 3710,
"name": "C7 M",
"cvalue": "C7 M",
"location": 15,
"name_fixed": "c7 m laptops",
"typeid": 26
},
{
"id": 3821,
"name": "Intel Core 2 Duo",
"cvalue": "Intel Core 2 Duo",
"location": 16,
"name_fixed": "intel core 2 duo laptops",
"typeid": 26
},
{
"id": 3822,
"name": "Intel Quad Core",
"cvalue": "Intel Quad Core",
"location": 17,
"name_fixed": "intel quad core laptops",
"typeid": 26
},
{
"id": 3823,
"name": "Intel Core 2 Quad",
"cvalue": "Intel Core 2 Quad",
"location": 19,
"name_fixed": "intel core 2 quad laptops",
"typeid": 26
},
{
"id": 4172,
"name": "Intel Atom",
"cvalue": "Intel Atom",
"location": 20,
"name_fixed": "intel atom laptops",
"typeid": 26
},
{
"id": 5718,
"name": "Intel Core i5",
"cvalue": "Intel Core i5",
"location": 20,
"name_fixed": "intel core i5 laptops",
"typeid": 26
},
{
"id": 5719,
"name": "Intel Core i7",
"cvalue": "Intel Core i7",
"location": 20,
"name_fixed": "intel core i7 laptops",
"typeid": 26
},
{
"id": 5822,
"name": "Intel Core i3",
"cvalue": "Intel Core i3",
"location": 20,
"name_fixed": "intel core i3 laptops",
"typeid": 26
},
{
"id": 5885,
"name": "Intel Pentium",
"cvalue": "Intel Pentium",
"location": 20,
"name_fixed": "intel pentium laptops",
"typeid": 26
},
{
"id": 5924,
"name": "AMD Phenom",
"cvalue": "AMD Phenom",
"location": 20,
"name_fixed": "amd phenom laptops",
"typeid": 26
},
{
"id": 5933,
"name": "Intel Core Solo",
"cvalue": "Intel Core Solo",
"location": 20,
"name_fixed": "intel core solo laptops",
"typeid": 26
},
{
"id": 5934,
"name": "Dual Core II",
"cvalue": "Dual Core II",
"location": 20,
"name_fixed": "dual core ii laptops",
"typeid": 26
},
{
"id": 5942,
"name": "AMD V Series",
"cvalue": "AMD V Series",
"location": 20,
"name_fixed": "amd v series laptops",
"typeid": 26
},
{
"id": 5943,
"name": "Athlon II Neo",
"cvalue": "Athlon II Neo",
"location": 20,
"name_fixed": "athlon ii neo laptops",
"typeid": 26
},
{
"id": 5967,
"name": "Celeron 900",
"cvalue": "Celeron 900",
"location": 20,
"name_fixed": "celeron 900 laptops",
"typeid": 26
},
{
"id": 6018,
"name": "Atom Dual Core",
"cvalue": "Atom Dual Core",
"location": 20,
"name_fixed": "atom dual core laptops",
"typeid": 26
},
{
"id": 6059,
"name": "AMD E350",
"cvalue": "AMD E350",
"location": 20,
"name_fixed": "amd e350 laptops",
"typeid": 26
},
{
"id": 6161,
"name": "AMD P340",
"cvalue": "AMD P340",
"location": 20,
"name_fixed": "amd p340 laptops",
"typeid": 26
},
{
"id": 6567,
"name": "AMD C50",
"cvalue": "AMD C50",
"location": 20,
"name_fixed": "amd c50 laptops",
"typeid": 26
},
{
"id": 6589,
"name": "AMD Turion",
"cvalue": "AMD Turion",
"location": 20,
"name_fixed": "amd turion laptops",
"typeid": 26
},
{
"id": 6605,
"name": "AMD Dual-Core",
"cvalue": "AMD Dual-Core",
"location": 20,
"name_fixed": "amd dual core laptops",
"typeid": 26
},
{
"id": 6827,
"name": "AMD E-450",
"cvalue": "AMD E-450",
"location": 20,
"name_fixed": "amd e 450 laptops",
"typeid": 26
},
{
"id": 6828,
"name": "AMD A-Series",
"cvalue": "AMD A-Series",
"location": 20,
"name_fixed": "amd a series laptops",
"typeid": 26
},
{
"id": 6829,
"name": "AMD E-240",
"cvalue": "AMD E-240",
"location": 20,
"name_fixed": "amd e 240 laptops",
"typeid": 26
},
{
"id": 6903,
"name": "AMD E2",
"cvalue": "AMD E2",
"location": 20,
"name_fixed": "amd e2 laptops",
"typeid": 26
},
{
"id": 6905,
"name": "AMD C-Series",
"cvalue": "AMD C-Series",
"location": 20,
"name_fixed": "amd c series laptops",
"typeid": 26
},
{
"id": 6906,
"name": "AMD E-Series",
"cvalue": "AMD E-Series",
"location": 20,
"name_fixed": "amd e series laptops",
"typeid": 26
}
]
},
{
"id": 493,
"catid": 24,
"name": "Weight",
"location": 2,
"type": 2,
"typename": "Range",
"TypeContent": [
{
"id": 4755,
"name": "1-2 kg",
"cvalue": "1-2",
"location": 1,
"name_fixed": "1 2 kg laptops",
"typeid": 493
},
{
"id": 4756,
"name": "2-3 kg",
"cvalue": "2-3",
"location": 2,
"name_fixed": "2 3 kg laptops",
"typeid": 493
},
{
"id": 4757,
"name": "3-4 kg",
"cvalue": "3-4",
"location": 3,
"name_fixed": "3 4 kg laptops",
"typeid": 493
},
{
"id": 4758,
"name": "4-5 kg",
"cvalue": "4-5",
"location": 4,
"name_fixed": "4 5 kg laptops",
"typeid": 493
}
]
},
{
"id": 704,
"catid": 24,
"name": "Display Resolution",
"location": 3,
"type": 3,
"typename": "List",
"TypeContent": [
{
"id": 6982,
"name": "2880x1800",
"cvalue": "2880x1800",
"location": 1,
"name_fixed": "2880x1800 laptops",
"typeid": 704
},
{
"id": 6981,
"name": "2560x1600",
"cvalue": "2560x1600",
"location": 2,
"name_fixed": "2560x1600 laptops",
"typeid": 704
},
{
"id": 6973,
"name": "1920x1080",
"cvalue": "1920x1080",
"location": 2,
"name_fixed": "1920x1080 laptops",
"typeid": 704
},
{
"id": 6974,
"name": "1680x1080",
"cvalue": "1680x1080",
"location": 2,
"name_fixed": "1680x1080 laptops",
"typeid": 704
},
{
"id": 6975,
"name": "1600x900",
"cvalue": "1600x900",
"location": 3,
"name_fixed": "1600x900 laptops",
"typeid": 704
},
{
"id": 6976,
"name": "1440x900",
"cvalue": "1440x900",
"location": 4,
"name_fixed": "1440x900 laptops",
"typeid": 704
},
{
"id": 6977,
"name": "1366x768",
"cvalue": "1366x768",
"location": 5,
"name_fixed": "1366x768 laptops",
"typeid": 704
},
{
"id": 6978,
"name": "1280x1024",
"cvalue": "1280x1024",
"location": 6,
"name_fixed": "1280x1024 laptops",
"typeid": 704
},
{
"id": 6979,
"name": "1280x800",
"cvalue": "1280x800",
"location": 7,
"name_fixed": "1280x800 laptops",
"typeid": 704
},
{
"id": 6980,
"name": "1280x720",
"cvalue": "1280x720",
"location": 8,
"name_fixed": "1280x720 laptops",
"typeid": 704
},
{
"id": 6986,
"name": "1024x600",
"cvalue": "1024x600",
"location": 9,
"name_fixed": "1024x600 laptops",
"typeid": 704
}
]
}
]
}
};
ko.utils.arrayForEach(data.d.Rows, function (o, i) {
o.values = ko.observableArray((data.d['type' + o.location]() + '').replace(', ', ',').split(','));
o.values.subscribe(function () { data.d['type' + this.location](this.values().join(',')) }, o);
});
ko.applyBindings(data);
</script>