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 
});