title: Enable/Disable dropdown - Javascript
body: <p>I have the following code where 2 drop downs are available on the UI. When I select value "1" of drop down 1, the drop down 2 should be disabled. When I select value "1", the dropdown 2 is disabled. But I am not able to re-enable the drop down 2 when the user select value "2" from drop down 1. I am not sure since I am calling the <code>performValidation()</code> method for <code>onClick</code> event of both the options in drop down 1.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;script = "text/javascript"&gt;
       function performValidation()
       {
             if (document.mainForm.criteriaOne.value == "1")
             {
                  document.mainForm.criteriaTwo.options.length = 0;
                  document.mainForm.criteriaTwo.disabled = true;
             }
             else
                  document.mainForm.criteriaTwo.disabled = false;
       }
  &lt;/script&gt;
  &lt;body&gt;
          &lt;form name="mainForm" action= "" method ="get"&gt;
                Criteria One:&lt;select id = "criteriaOne"&gt;
               &lt;option value = "1" onClick ="performValidation()"&gt; Select One - One&lt;/option&gt;
               &lt;option value = "2" onClick ="performValidation()"&gt; Select one - Two&lt;/option&gt;
                &lt;/select&gt;
                Criteria Two:&lt;select id = "criteriaTwo"&gt;
               &lt;option value = "1" onClick ="performValidation()"&gt; Select Two - One&lt;/option&gt;
                &lt;/select&gt;
           &lt;/form&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>