Based on the value from dropbox one of the two dropboxes should become visible using jquery
<p>the page has three dropdown boxes. by selecting the first value in the drop down, one dropdown will become visible. by selecting the other value, the third drop downbox should become visible. the 2 values in the first dropdown are hard coded. but the values in the other two drop downs should come from database. We are using java servlets at the back end. can someone provide the jquery code for this</p>

<pre><code>&lt;head&gt;

&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;
&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
    $('#jobCategoryRole').change(function() {
        dropdown = $('jobCategoryRole').val();

        $('#jobcategory').hide();
        $('#role').hide();

        if (dropdown == '1')
        {
           $('#jobcategory').show();
        }

        if (dropdown == '2')
        {
           $('#role').show();
        }
    });
});
&lt;/script&gt;

&lt;body&gt;


&lt;select id="jobCategoryRole"&gt;
                    &lt;option value="Select"&gt;--Select--&lt;/option&gt;
                    &lt;option value="Job Category"&gt;Job Category&lt;/option&gt;
                    &lt;option value="Role"&gt;Role&lt;/option&gt;
                &lt;/select&gt;

&lt;select id="jobCategory"&gt;
                    &lt;option value="Select"&gt;--Select--&lt;/option&gt;
                    &lt;option value="Shared Services"&gt;Shared Services&lt;/option&gt;                    
                    &lt;option value="BPO Voice"&gt;BPO Voice&lt;/option&gt;
                    &lt;option value="BPO Process"&gt;BPO Process&lt;/option&gt;
                &lt;/select&gt;

&lt;select id="role"&gt;
                    &lt;option value="Select"&gt;--Select--&lt;/option&gt;
                    &lt;option value="HR Recruiter"&gt;HR Recruiter&lt;/option&gt;                  
                    &lt;option value="Finance Manager"&gt;Finance Manager&lt;/option&gt;                    
                &lt;/select&gt;

&lt;/body&gt;
</code></pre>
