title: How to disable dropdown option values based on another dropdown
body: <p>Searching over the google and stack overflow, could not find a solution to this.</p>
  
  <p>I have two dropdown in MVC core view</p>
  
  <p>dropdown a looks like following:</p>
  
  <pre><code>&lt;option&gt;A&lt;/option&gt;
  &lt;option&gt;B&lt;/option&gt;
  </code></pre>
  
  <p>and second dropdown looks like following:</p>
  
  <pre><code>&lt;option&gt;A1&lt;/option&gt;
  &lt;option&gt;A2&lt;/option&gt;
  &lt;option&gt;A3&lt;/option&gt;
  &lt;option&gt;B1&lt;/option&gt;
  &lt;option&gt;B2&lt;/option&gt;
  </code></pre>
  
  <p>I need to disable A1,A2,and A3 in second dropdown when B is selected in the first dropdown and disable B1, and B2 when A is selected in the first dropdown.</p>
  
  <p>I tried the following but it is not working:</p>
  
  <pre><code>    $('#FirstDropDown').change(function () {
          var data = $(this).val();
          if (data == "A") {
              $("#SecondDropDown option[value='A1']").attr('disabled', 'disabled');
              $("#SecondDropDown option[value='A2']").attr('disabled', 'disabled');
              $("#SecondDropDown option[value='A3']").attr('disabled', 'disabled');
          }
      });
  </code></pre>