过滤 kendo 下拉列表以删除选项

Question

我想过滤安全问题，这样如果我从问题列表中 select questiona，对于下一个问题，我将不再在安全问题列表中看到 questiona。这是为了防止重复 select 安全问题。

这是一个纯 jquery 实现的 jsfiddle：

我想知道如何使用相同的方法来过滤 kendo 下拉列表：

例如我有三个下拉列表，例如：

<table style="float: left; width:300px;">
             <tr>
                <td>
                    <div class="editor-field">  
                              @(Html.Kendo().DropDownListFor(m => m.Q1Id).HtmlAttributes(
                              new { style = "width:250px;", @id = "idQuestion1", @class="security"})
                                  .Name("Q1DropDown")
                                  .DataTextField("Text")
                                  .DataValueField("Value")
                                  .BindTo(Controllers.AccountController.SecurityQuestionList())
                                  .Enable(true)
                                  .Events(e=>e.Change("CreateAccount.QuestionChanged")))
                     </div>
                </td>
             </tr>
            <tr>
                <td>
                    <div class="editor-field">  
                              @Html.TextBoxFor(model => model.A1, new { @class = "formTextbox k-textbox", @id = "idAnswer1" })
                           </div>
                </td>
             </tr>
            <tr>
                <td>
                    <div class="editor-field">  
                              @(Html.Kendo().DropDownListFor(m => m.Q2Id).HtmlAttributes(
                              new { style = "width:250px;", @id = "idQuestion2", @class="security" })
                                  .Name("Q2DropDown")
                                  .DataTextField("Text")
                                  .DataValueField("Value")
                                  .BindTo(Controllers.AccountController.SecurityQuestionList())
                                  .Enable(true)
                                  .Events(e=>e.Change("CreateAccount.QuestionChanged")))
                          </div>
                </td>
             </tr>
              <tr>
                <td>
                      <div class="editor-field">  
                              @Html.TextBoxFor(model => model.A2, new { @class = "formTextbox k-textbox", @id = "idAnswer2" })                              
                           </div>
                </td>
             </tr>
              <tr>
                <td>
                     <div class="editor-field">  
                              @(Html.Kendo().DropDownListFor(m => m.Q3Id).HtmlAttributes(
                              new { style = "width:250px;", @id = "idQuestion3", @class="security" })
                                  .Name("Q3DropDown")
                                  .DataTextField("Text")
                                  .DataValueField("Value")
                                  .BindTo(Controllers.AccountController.SecurityQuestionList())
                                  .Enable(true)
                                  .Events(e=>e.Change("CreateAccount.QuestionChanged")))
                          </div>
                </td>
             </tr>
              <tr>
                <td>
                    <div class="editor-field">  
                              @Html.TextBoxFor(model => model.A3, new { @class = "formTextbox k-textbox", @id = "idAnswer3" })
                           </div>
                </td>
             </tr>
         </table>

我试过了，但没用：

    QuestionChanged: function () {
                var sec = $('.security');
                sec.change(function () {
                    sec.find('option').show().end().each(function () {
                        $('option[value="' + $(this).val() + '"]:not(:selected):not([value="0"])', sec).hide();
                    });
                }).change();
            }

Answer 1

对于这个实现我有一个想法，首先你需要有 3 个下拉列表，它们有 一个相同的 datasource/observable 但 三个不同的值 存储每个下拉列表值并指向 一个相同的更改事件 ，例如 mvvm

<h4 class="title">DropDownList</h4>
<input class="customdropdownlist" data-role="dropdownlist" data-text-field="text" data-value-field="value" data-bind="source:dataSource, value:dd1, events:{change:onChange}" style="width: 400px;"/>

<h4 class="title">DropDownList</h4>
<input class="customdropdownlist" data-role="dropdownlist" data-text-field="text" data-value-field="value" data-bind="source:dataSource, value:dd2, events:{change:onChange}" style="width: 400px;"/>

<h4 class="title">DropDownList</h4>
<input class="customdropdownlist" data-role="dropdownlist" data-text-field="text" data-value-field="value" data-bind="source:dataSource, value:dd3, events:{change:onChange}" style="width: 400px;"/>

在视图模型更改事件上，您可以按照自己的逻辑进行操作，也许您现在可以编写比我更好的代码，但重点是

To loop through all 3 dropdownlist <li></li> , and compare with the three value dd1,dd2,dd3 hide if match, otherwise show it

代码：

var dropdowns = $("input.customdropdownlist");
for(j=0;j<dropdowns.length;j++){
  var list = $(dropdowns[j]).data("kendoDropDownList").ul.find("li.k-item");
  for(i=0;i<list.length;i++){
    if(viewModel.dd1 &&list[i].textContent == viewModel.dataSource.get(viewModel.dd1).text){
      $(list[i]).hide();
    }else if(viewModel.dd2 &&list[i].textContent == viewModel.dataSource.get(viewModel.dd2).text){
      $(list[i]).hide();
    }else if(viewModel.dd3 &&list[i].textContent == viewModel.dataSource.get(viewModel.dd3).text){
        $(list[i]).hide();
    }else{
        $(list[i]).show();
    }
  }
}

kendo dojo 中的工作示例，添加通过修改您的代码更新了 dojo。

Answer 2

我为 kendo ComboBox 做了类似的事情。请操作以下 js 函数，它也适用于 kendo Drop Down。

function QuestionChanged(event) {
  $("[class^=security]").each(function () {
     if (event.sender.element.attr('class') != $(this).attr('class')) {
        var comboBox = $('#' + $(this).attr('id')).data('kendoComboBox');
        $(comboBox.dataSource.data()).each(function () {
            if (event.sender._selectedValue == this.Value) {
                var data = this;
                comboBox.dataSource.remove(data);
            }
        });
     }
  });
}

注意： 添加 security class 到每个下拉列表作为第一个下拉菜单的 security1，第二个下拉菜单的 security2，依此类推。

希望对您有所帮助！请随时留下您的反馈。

过滤 kendo 下拉列表以删除选项

Filter kendo dropdownlist to remove options

javascript

jquery

asp.net-mvc

kendo-ui

kendo-dropdown