Filter kendo dropdownlist to remove options

Question

I want to filter security questions such that if I select questiona from the list of questions, for the next questions, I no longer see questiona in the list of security questions. This is to prevent duplicate selection of security questions.

Here's a jsfiddle with a pure jquery implementation:

http://jsfiddle.net/jbfbxvoo/

I was wondering how I can use the same approach to filter kendo dropdownlists:

E.g. I have three dropdownlists like:

<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>

I tried this but doesn't work:

    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

For this implementation i have an idea, where first you need to have 3 dropdownlist that have one same datasource/observable but three different value to store each dropdownlist value and point to one same change event, example in 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;"/>

On the view model change event you do your logic, maybe you can write better code than mine right now but the main point is

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

And the code :

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

Working example in kendo dojo, add updated dojo from modifying your code.