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

Question

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>

Answer 1

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>