Question

I have two dropdowns

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

I want to write some JQuery to make the value of the status dropdown change to the default value when the value of the roles drop down is changed. Any idea how this is done?

Thanks,

Sachin

EDIT:

The generated html is this:

<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="[e-mail]" 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

Use the change event…

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

Here is a working example