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

JQuery用于在另一个下拉列表的值更改时将下拉列表设置为默认值

2 个答案: