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

http://stackoverflow.com/questions/292615/how-can-i-set-the-value-of-a-dropdownlist-using-jquery — Samich, Feb 07 '12 at 15:45
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, Feb 07 '12 at 16:01

musefan · Accepted Answer · 2012-02-07T16:04:35.503

5

Use the change event...

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

Here is a working example

edited Feb 07 '12 at 16:04

answered Feb 07 '12 at 15:45

musefan

47,875
21
135
185

Would `$(#AvailableRoles")` not be looking for an element with an id attribute of AvailableRoles instead of the name attribute? – Nope Feb 07 '12 at 15:51
3

@FrançoisWahl: Those MVC Html helpers will set the ID and Name attributes to be the same – musefan Feb 07 '12 at 15:53
@Sachin: You did replace "New Value" with an approriate value right? – musefan Feb 07 '12 at 15:54
`@musefan: ` Ah, I see, I never realised that. Thanks for getting back. – Nope Feb 07 '12 at 15:55
@Sachin: I have added a link to a working example. If it doesn't work you have different issues. – musefan Feb 07 '12 at 16:04
Now, is there some way also of calling the Statuses() method from JQuery just before the status dropdown is set to the default value? – Sachin Kainth Feb 07 '12 at 16:13
@Sachin: What is the `Statuses()` method? You can always add a function call in the change event before settings the value – musefan Feb 07 '12 at 16:19
The thing is that the Status method is in the model that I've passed in to this view. Is it possible to call a model method from within JQuery? – Sachin Kainth Feb 07 '12 at 16:31
@Sachin: No, this is not possible. Jquery is client side code. You best bet would be to make an ajax call to a new Controller Action that return a JSON result. See [here](http://api.jquery.com/jQuery.getJSON/) and [here](http://blog.janjonas.net/2011-08-09/asp_net-mvc_3-json-result-jquery-ajax-form-validation) ... if you want more help on these subject I would suggest looking around and asking a **new** question on SO if you hit problems ;) – musefan Feb 07 '12 at 16:35

ShankarSangoli · Answer 2 · 2012-02-07T15:58:13.600

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 07 '12 at 15:58

answered Feb 07 '12 at 15:46

ShankarSangoli

69,612
13
93
124

@enigma - If the element renders id field then yes we can use id selector. – ShankarSangoli Feb 07 '12 at 15:57
I've used this: but still it doesn't work – Sachin Kainth Feb 07 '12 at 16:01
Can you put an alert inside the handler and see if the alert comes up? – ShankarSangoli Feb 07 '12 at 16:02
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. – Nope Feb 07 '12 at 16:04
@Sachin - Looking at the generated markup the default option is not "Select status". You want the default option "Approved" to be selected right? – ShankarSangoli Feb 07 '12 at 16:06

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

2 Answers2