过滤剑道下拉列表以删除选项

Filter kendo dropdownlist to remove options

本文关键字：删除 选项 下拉列表 过滤      更新时间：2023-09-26

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

下面是一个纯jquery实现的jsfiddle:

http://jsfiddle.net/jbfbxvoo/

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

。我有三个下拉列表，比如:

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

对于这个实现，我有一个想法，首先你需要有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 ComboBox做了类似的事情。操作下面的js函数，它也会为kendo下拉菜单工作。

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类，第一个下拉列表为security1，第二个下拉列表为security2，依次类推。

希望有帮助!请随意留下你的反馈。

相关文章：