title: Remove an element from dropdownlist helper
body: <p>I have a view that contains two <code>@Html.DropDownListFor</code> helpers:</p>
  
  <pre><code> &lt;div class="editor-field"&gt;
          @Html.DropDownListFor(model =&gt; model.Employee, (IEnumerable&lt;SelectListItem&gt;)ViewBag.emps, "--Select--", new { style = "width:150px", id = "ddl1"})
          @Html.ValidationMessageFor(model =&gt; model.Employee)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.DropDownListFor(model =&gt; model.Employee2, (IEnumerable&lt;SelectListItem&gt;)ViewBag.emps, "--Select--", new { style = "width:150px", id = "ddl2"})
          @Html.ValidationMessageFor(model =&gt; model.Employee2)
      &lt;/div&gt;
  </code></pre>
  
  <p>They are populated like this:</p>
  
  <pre><code>public ActionResult Create()
      {
          List&lt;Employees&gt; emps = new List&lt;Employees&gt;();
          emps.Add(new Employees { Id = 0, Name = "Michael Jordan" });
          emps.Add(new Employees { Id = 1, Name = "Magic Johnson" });
          emps.Add(new Employees { Id = 2, Name = "Larry Bird" });
  
          var items = emps.Select(i =&gt; new SelectListItem
          {
              Value= i.Id.ToString(),
              Text =i.Name
          });
          ViewBag.emps = items;
          return View();
      }
  </code></pre>
  
  <p>How can I remove the selected item of the first DDL from the second DDL?
  I managed to get the selected item using jQuery like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
      $("#ddl1").change(function () {
          alert($("#ddl1").val());
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>However, I couldn't find a way to use it for my purpose.</p>