CODEWITHSUNDEEP
javascriptjqueryhtml-select
NealR
NealR

Reputation: 10679

Change drop down selected item based on selected item of another drop down list

I have two drop down lists on my ASP.NET MVC 3. When one of the drop down lists is set to "Sole Proprietor", the other needs to be set to the same.

I'm sure the JavaScript, or jQuery, is very simple for something like this, however I am having a hard time finding a good example on the web since I am populating the drop down lists manually instead of through the controller.

Can someone either help me out with the code or point me to a good resource? 

<select id="ProducerType" name="nmf" style="float:left;">
    <option value="Principal">Principal</option>
    <option value="Producer">Producer</option>
    <option value="SoleProprietor">Sole Proprietor</option>                
</select>

<select id="Role" name="nmf" style="float:left;">
    <option value="Agent">Agent</option>
    <option value="Financial Advisor">Financial Advisor</option>
    <option value="Platform">Platform</option>
    <option value="Principla_Owner">Principal/Owner</option>
    <option value="Registered Rep">Registered Rep</option>
    <option value="Sole Proprietor">Sole Proprietor</option>              
</select>

Upvotes: 0

Views: 7018

Answers (1)

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

jsFiddle example : http://jsfiddle.net/9GZQ2/

I set both dropdown values to "Sole Proprietor" your code has the space missing in the ProducerType select

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
    $(function(){
        $("#ProducerType").change(function(){
           var value=$(this).val();
           if(value=="Sole Proprietor") $("#Role").val(value);
        });
        $("#Role").change(function(){
           var value=$(this).val();
           if(value=="Sole Proprietor") $("#ProducerType").val(value);
        });
    });
</script>

Upvotes: 4

Related Questions