JQuery的用于当另一个下拉列表的值更改

Question

我有两个下拉列表

@using (Html.BeginForm()) { 
<fieldset> 
     <legend></legend> 
     <label>User details</label> 

<section> 
      @Html.LabelFor(model => model.Status) 
      <div> @Html.DropDownList("Statuses", Model.Statuses(), "Select status", new { required = "required" }) </div> 
      @Html.ValidationMessageFor(model => model.Status)  
     </section> 

     <section> 
      @Html.LabelFor(model => model.Roles) 
      <div> @Html.DropDownList("AvailableRoles", Model.AvailableRoles(), "Select role", new { required = "required" }) </div> 
      @Html.ValidationMessageFor(model => model.Roles)  
     </section> 

     <section> 
      <div><button>Edit</button></div> 
     </section> 
    </fieldset> 
} 

我想写一些JQuery的当值，使状态下拉菜单变化的值设置为默认值的下拉菜单设置为默认值下拉的角色已更改。任何想法如何做到这一点？

感谢，

萨钦

编辑：

生成的HTML是这样的：

<form method="post" action="/Admin/Account/EditUser?userName=user1"> <fieldset> 
     <legend></legend> 
     <label>User details</label> 

     <section> 
      <label for="UserName">User name</label> 
      <div> <input type="text" value="user1" name="UserName" id="UserName" disabled="disabled"> </div> 
      <span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-valid"></span>  
     </section> 

     <section> 
      <label for="Email">Email address</label> 
      <div> <input type="text" value="sachinkainth@hotmail.com" required="required" name="Email" id="Email"> </div> 
      <span data-valmsg-replace="true" data-valmsg-for="Email" class="field-validation-valid"></span>  
     </section> 

     <section> 
      <label for="Status">Status</label> 
      <div> <select required="required" name="Statuses" id="Statuses"><option value="">Select status</option> 
<option value="Approved" selected="selected">Approved</option> 
<option value="Registered">Registered</option> 
<option value="Suspended">Suspended</option> 
</select> </div> 
      <span data-valmsg-replace="true" data-valmsg-for="Status" class="field-validation-valid"></span>  
     </section> 

     <section> 
      <label for="Approved">Approved</label> 
      <div> <input type="checkbox" value="true" name="Approved" id="Approved" data-val-required="The Approved field is required." data-val="true" checked="checked"><input type="hidden" value="false" name="Approved"> </div> 
      <span data-valmsg-replace="true" data-valmsg-for="Approved" class="field-validation-valid"></span>  
     </section> 

     <section> 
      <label for="FirstName">First name</label> 
      <div> <input type="text" value="e" required="required" name="FirstName" id="FirstName"> </div> 
      <span data-valmsg-replace="true" data-valmsg-for="FirstName" class="field-validation-valid"></span>  
     </section> 

     <section> 
      <label for="LastName">Last name</label> 
      <div> <input type="text" value="e" required="required" name="LastName" id="LastName"> </div> 
      <span data-valmsg-replace="true" data-valmsg-for="LastName" class="field-validation-valid"></span>  
     </section> 

     <section> 
      <label for="Roles">Roles</label> 
      <div> <select required="required" name="AvailableRoles" id="AvailableRoles"><option value="">Select role</option> 
<option value="Buyer" selected="selected">Buyer</option> 
<option value="Seller">Seller</option> 
</select> </div> 
      <span data-valmsg-replace="true" data-valmsg-for="Roles" class="field-validation-valid"></span>  
     </section> 

     <section> 
      <div><button>Edit</button></div> 
     </section> 
    </fieldset> 
</form> 

Answer 1

使用更改事件......

$("#AvailableRoles").change(function(){ 
    $("#Statuses").val("New Value"); 
}); 

Here is a working example

Answer 2

您可以使用change事件来完成此操作。

$('select[name="AvailableRoles"]').change(function(){ 
    $('select[name="Statuses"]')[0].selectedIndex = 0;//Will select first option 
}); 

我认为mvc helper方法会呈现id属性，它也与name字段相同。在这种情况下，如果你使用id选择器会更好。

$('#AvailableRoles').change(function(){ 
    $('#Statuses')[0].selectedIndex = 0;//Will select first option 
});