Javascript 使用bootstrap.multiselect.js的Knockout.js自定义绑定未更新选定值

我使用击倒结合。HTML表中有三列，允许您指定搜索项、搜索运算符和搜索条件。搜索操作符列实际上包含三个不同的元素：一个multi-select、一个single-select和一个input元素；在任何给定时间，三个元素中只有一个实际显示。显示哪个元素由“搜索项”列的值控制

所有select元素都初始化为引导multiselect。“搜索条件”列和“搜索运算符”列可以正常工作。但是，搜索项列似乎没有正确绑定回引导multiselect隐藏的本机select。搜索项列将在您选择的值旁边选择单选按钮，但是文本将显示选择列表中的第一个值。如果我没有将搜索项列初始化为引导multiselect，则搜索项列的本机select将按预期工作。将按预期使用正确的值更新淘汰视图模型

以下是我对搜索条件表的HTML声明：

<table id="search-criteria" class="table table-condensed hidden" data-bind="css: {hidden:SpecifiedCriteria().length == 0}">
    <thead>
    <tr>
        <th class ="search-item">
            Item
        </th>
        <th class="search-operator">
            Operator
        </th>
        <th class="search-criteria">
            Criteria
        </th>
    </tr>
    </thead>
    <tbody data-bind="foreach:SpecifiedCriteria">
    <tr>
        <td class="search-item">
            <select class="search-item" data-bind="searchDropDownList:SelectedItem, foreach: $root.CriteriaItems, value:SelectedItem">
                <optgroup data-bind="attr: {label: label}, foreach: children">
                    <option data-bind="text: DisplayName, option: $data"></option>
                </optgroup>
            </select>
        </td>
        <td class="search-operator">
            <select class="search-operator" data-bind="searchDropDownList:MatchCompareOperator, options:AvailableCompareOperators(), optionsValue: 'Value', optionsText: 'Key', value:MatchCompareOperator"></select>
        </td>
        <td class="search-criteria">
            <input type="text" class="search-criteria" data-bind="value:MatchValue" />
            <select class="search-criteria" data-bind="searchDropDownList:MatchValueListSelectedItemIds, options:MatchValueList, optionsValue:'Id', optionsText:'Description', selectedOptions:MatchValueListSelectedItemIds"></select>
            <select class="search-criteria" multiple="multiple" data-bind="searchDropDownList:MatchValueListSelectedItemIds, options:MatchValueList, optionsValue:'Id', optionsText:'Description', selectedOptions:MatchValueListSelectedItemIds"></select>
        </td>
    </tr>
    </tbody>
</table>

简单回顾一下：如果我不将搜索项列连接为引导多选项，那么一切都会正常工作。如果我将其连接起来，该列将显示列表中的第一个值。在searchDropDownList绑定处理程序中设置断点将始终显示通过valueAccessor获得的值，该值是给定搜索项元素列表中的第一项

---

我对此束手无策，无法理解或解释searc item列的这种行为，特别是因为其他两列似乎没有问题。

您可以将“更改”事件附加到下拉列表并设置ko对象。假设“示例”是您的下拉列表：

  var $example = $('#example');
  $example.multiselect();
  $example.on('change', function() {
      //set your ko object with the selected value
      itemObject.SelectedItem($example.val());
  });

---

您可以将“更改”事件附加到下拉列表并设置ko对象。假设“示例”是您的下拉列表：

  var $example = $('#example');
  $example.multiselect();
  $example.on('change', function() {
      //set your ko object with the selected value
      itemObject.SelectedItem($example.val());
  });