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

本文关键字：下拉列表 设置 默认值 用于 另一个 JQuery | 更新日期: 2023-09-27 18:23:44

我有两个下拉

@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，当角色下拉列表的值更改时，使状态下拉列表的数值更改为默认值。知道这是怎么做到的吗？

谢谢，

Sachin

编辑：

生成的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>

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

使用更改事件。。。

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

下面是一个工作示例

您可以使用change事件来执行此操作。

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

我认为mvc助手方法也会渲染id属性，这与名称字段相同。在这种情况下，最好使用id选择器。

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