Отбирательный список фильтра kendo для удаления параметров

Question

Я хочу отфильтровать вопросы безопасности таким образом, что, если я выберу вопрос из списка вопросов, для следующих вопросов я больше не вижу вопроса в списке вопросов безопасности. Это делается для предотвращения дублирования выбора вопросов безопасности.

Вот jsfiddle с чистой реализации Jquery:

http://jsfiddle.net/jbfbxvoo/

мне было интересно, как я могу использовать тот же подход для фильтрации кендо DropDownLists:

Э.Г. У меня есть три DropDownLists как:

<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 DropDownList, которые имеют один такой же Источник данных/наблюдаемая но три различные значения для хранения каждого значения DropDownList и указывают на один же события изменения, например, в 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 DropDownList <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, и она также будет работать для 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); 
      } 
     }); 
    } 
    }); 
} 

Примечание: Добавить безопасности класс к каждому из выпадающего списка, как Безопасность1 для первого падения вниз, безопасности2 для 2-го выпадающего и так далее.

Надеюсь, это поможет! Не стесняйтесь оставлять свои отзывы.