Question

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

这是一个带有纯jquery实现的jsfiddle：

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

E.g。我有三个下拉列表，如：

<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个下拉列表，其中一个相同的数据源/可观察但三个不同的值来存储每个下拉列表值和指向同一个更改事件，例如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;"/>

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

循环浏览所有3个下拉列表<li></li>，并与之比较三个值dd1，dd2，dd3如果匹配则隐藏，否则显示

代码：

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功能，它也适用于剑道下拉。

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);
            }
        });
     }
  });
}

注意：将安全类添加到每个下拉列表中，作为第一个下拉列表的security1，第二个下拉列表中的security2，依此类推

希望它有所帮助！随时留下您的反馈意见。

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

2 个答案: