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

Question

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

这是一个带有纯 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();
            }

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;"/>

在 View 模型更改事件上，您执行自己的逻辑，也许您现在可以编写比我更好的代码，但要点是

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避免修改您的代码。