title: MVC 4 disable values in multiple dropdowns using Razor
body: <p>I have an issue where I'm trying to add two dropdowns per object. The objects are dynamic so I could have 6 objects, each with 2 corresponding dropdowns inside them. Inside these dropdowns, there will be 1-4 selections and the initial empty value. For the corresponding dropdowns per object, I would like it to only allow unique selections.</p>
  
  <p>For example. Object 1 has 2 dropdowns with 3 selections. The user selects 1 in the first dropdown, so they can't select 1 in the 2nd dropdown. The user selects 3 in the second dropdown, so they can't select 3 in the 1st dropdown. Object 2 will have it's own 2 dropdowns that are only affected by it's own dropdowns and not the dropdowns in object 1.</p>
  
  <p>I currently have it creating the dropdowns dynamically as such:</p>
  
  <pre><code>public class FormInformation
  {
      public IEnumerable&lt;SelectListItem&gt; ListItems { get; set; }
      public string[] SelectedItems { get; set; }
      public ServiceObject serviceObject { get; set; }
  }
  </code></pre>
  
  <p>This is how I initialize the dropdowns:</p>
  
  <pre><code>private SelectList CreateSelectListItems(int counter, List&lt;string&gt; clients)
      {
          if (counter == 1)
          {
              return new SelectList(new[]
                      {
                          new {id = 1, Name = ""},
                          new {id = 2, Name = clients[0]},
                      }, "Id", "Name");
          }
          if (counter == 2)
          {
              return new SelectList(new[]
                      {
                          new {id = 1, Name = ""},
                          new {id = 2, Name = clients[0]},
                          new {id = 3, Name = clients[1]},
                      }, "Id", "Name");
          }
          if (counter == 3)
          {
              return new SelectList(new[]
                      {
                          new {id = 1, Name = ""},
                          new {id = 2, Name = clients[0]},
                          new {id = 3, Name = clients[1]},
                          new {id = 4, Name = clients[2]},
                      }, "Id", "Name");
          }
          else
          {
              return new SelectList(new[]
                      {
                          new {id = 1, Name = ""},
                          new {id = 2, Name = clients[0]},
                          new {id = 3, Name = clients[1]},
                          new {id = 4, Name = clients[2]},
                          new {id = 5, Name = clients[3]},
                      }, "Id", "Name");
          }
      }
  </code></pre>
  
  <p>and in my cshtml I have this:</p>
  
  <pre><code>@using (Html.BeginForm())
  {
      for(int i = 0; i &lt; Model.serviceObject.forms.Count; i++)
      {
         &lt;h2&gt;&lt;b&gt;Form Name:&lt;/b&gt; @Model.serviceObject.forms[i].formName&lt;/h2&gt;
      &lt;div style="overflow: hidden;"&gt;
          &lt;div style="float: left; margin-left: 50px;"&gt;
              Signer1:
              @Html.DropDownListFor(x =&gt; x.SelectedItems, Model.ListItems)
          &lt;/div&gt;
          &lt;div style="float: left; margin-left: 120px;"&gt;
              Signer 2: 
              @Html.DropDownListFor(x =&gt; x.SelectedItems, Model.ListItems)
          &lt;/div&gt;
     &lt;/div&gt;
     }
  }
  </code></pre>
  
  <p>My problem now is that I don't know how to set the dropdowns to be unique from each other. Maybe using Jquery? I'm not too experienced in Jquery, so I'm not too sure if it really is the best solution. Thank you for your time.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>For 2 dropdowns, I have set the class as "DropDown1" and the other as "DropDown2". I'm trying to use scripting and am not really getting how to use it right now. I have this so far. I know most of it is wrong, but is this the right direction/idea? I just need to understand javascript a little more.</p>
  
  <pre><code>&lt;script&gt;
          var drop2 = /*What goes here?*/.DropDown2;
          $("select[class=DropDown1]").change(function () {
              var drop1Selected = parseInt(this.value);
              $("select[class=DropDown2]")
                      .html(drop2)
                      .find('option').filter(function () {
                          return parseInt(this.value) == drop1Selected;
                      }).remove();
          });
      &lt;/script&gt;
  </code></pre>