JQuery for setting a dropdown to default value when value of another dropdown changed

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="[email protected]" 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>

Since you're writing JQuery (client side code) to solve your problem you should post the actual HTML markup that is generated, not the server side code used to generate it. — Servy
– Servy, Commented Feb 7, 2012 at 16:01

musefan · Accepted Answer · 2012-02-07 16:04:35Z

5

Use the change event...

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

Here is a working example

edited Feb 7, 2012 at 16:04

answered Feb 7, 2012 at 15:45

musefan

48.5k21 gold badges144 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nope Over a year ago

Would $(#AvailableRoles") not be looking for an element with an id attribute of AvailableRoles instead of the name attribute?

musefan Over a year ago

@FrançoisWahl: Those MVC Html helpers will set the ID and Name attributes to be the same

musefan Over a year ago

@Sachin: You did replace "New Value" with an approriate value right?

Nope Over a year ago

@musefan: Ah, I see, I never realised that. Thanks for getting back.

musefan Over a year ago

@Sachin: I have added a link to a working example. If it doesn't work you have different issues.

|

ShankarSangoli · Accepted Answer · 2012-02-07 15:58:13Z

5

You can use the change event to do this.

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

I think the mvc helper method will render id attribute also which is same as the name field. In this case it is better if you use id selector.

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

edited Feb 7, 2012 at 15:58

answered Feb 7, 2012 at 15:46

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

5 Comments

ShankarSangoli Over a year ago

@enigma - If the element renders id field then yes we can use id selector.

Sachin Kainth Over a year ago

I've used this: <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> but still it doesn't work

ShankarSangoli Over a year ago

Can you put an alert inside the handler and see if the alert comes up?

Nope Over a year ago

As Servy said in the comment on the question, posting the rendered HTML of the dropdowns might help. Maybe there is something rendered which makes a difference.

ShankarSangoli Over a year ago

@Sachin - Looking at the generated markup the default option is not "Select status". You want the default option "Approved" to be selected right?

Collectives™ on Stack Overflow

JQuery for setting a dropdown to default value when value of another dropdown changed

2 Answers 2

9 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related