javascript - 根据另一个下拉列表的选定项更改下拉选定项

Question

我的 ASP.NET MVC 3 上有两个下拉列表。当其中一个下拉列表设置为“Sole Proprietor”时，另一个需要设置为相同。

我确信 JavaScript 或 jQuery 对于这样的事情非常简单，但是我很难在网络上找到一个好的示例，因为我手动填充下拉列表而不是通过控制器。

有人可以帮助我编写代码或指出一个好的资源吗？

<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 示例：http: //jsfiddle.net/9GZQ2/

我将两个下拉值都设置为"Sole Proprietor"您的代码在ProducerType选择中缺少空格

<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>