jquery – 当文本框中没有任何内容时,如何将下拉列表重置为默认值？

2023年1月25日 236次阅读

我有一个文本框#Email,我有两个下拉列表菜单,#Carrier和#Phones.当输入电子邮件时,我想只启用Carriers下拉框而不启用电话.选择操作符后,必须启用电话下拉列表.只有在选择了电子邮件和操作符时,才能启用电话下拉列表.如果用户输入电子邮件并从#carriers和#phones中选择项目,然后删除电子邮件,则必须禁用两个下拉菜单.我希望它工作的方式是当用户从#carriers和#phones中选择项目然后删除电子邮件时,必须禁用下拉菜单并将其设置回默认值.现在它只会禁用但不会将它们恢复为默认值.

      <!-- Will check for e-mail and enable #carrires dropdownlist, otherwise, it will disable dropdownlist for #Carriers-->
    <script>
$(document).ready(function () {
    $('#Email').on('input change', function () { //check to see if email is empty
        if ($(this).val() == '') {
            $('#Carriers').prop('disabled', true);//disable carriers when there is no email
            $('#Phones').prop('disabled', true); //will keep Phones disabled when there is no email
        }
        else {
            $('#Carriers').prop('disabled', false);
        }
    });
});

    <!-- Will check for Carriers selected and enable the Phones dropdown list-->
<script>
$(document).ready(function () { //check if carriers is selected
    $('#Carriers').change(function () {
        if ($('#Carriers').val() == '') { //if empty
            $('#Phones').prop('disabled', true); //disable
        }
        else {
            $('#Phones').prop('disabled', false); //enable
        }
    });
});

     <!--this row carrier and phones-->
            <div class="form-group">
                <div class="col-lg-1 col-lg-offset-1 col-md-1 col-sm-1">
                    @Html.LabelFor(model => model.Carriers)
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    @Html.DropDownListFor(model => model.Carriers, new SelectList(ViewBag.Carriers, "ID", "Carrier1"), "Select a Carrier", new
           {
               @disabled = "disabled",
               data_bind = "value: Request.Carriers",
               @class = "form-control",
               data_width = "95%",
               data_toggle = "tooltip",
               data_placement = "top",
               title = "Requested Plan Carrier"
           })
                    @Html.ValidationMessageFor(model => model.Carriers, "", new { @class = "text-danger" })
                </div>
                <div class="col-lg-1">
                    @Html.LabelFor(model => model.Phones)
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3">
                    @Html.DropDownListFor(model => model.Phones, new SelectList(ViewBag.Phones as System.Collections.IEnumerable, "PhoneID", "Name"), "Select a Phone", new
               {
                   @disabled = "disabled",
                   data_bind = "value: Request.Phones",
                   @class = "form-control",
                   data_width = "95%",
                   data_toggle = "tooltip",
                   data_placement = "top",
                   title = "Requested Equipment"
               })
                    @Html.ValidationMessageFor(model => model.Phones, "", new { @class = "text-danger" })
                </div>

最佳答案 所以我写了一些东西,如果文本框中有输入,那么它将启用两个选择的按钮,如果没有,那么它不仅会禁用,而且还会将下拉框重置为默认值.

我希望你喜欢它,如果你需要更多的帮助,请评论.

$(document).ready(function () {
    $('#Email').on('input', function () { //check to see if email is empty
      if ($(this).val() == '') {
        $('#Carrier, #Phones')
          .prop('disabled', true).each(function () {
            $(this).val($(this).find("option:first").val());
          });
      } else {
        $('#Carrier')
        .prop('disabled', false);
      }
    });
    $("#Carrier").on('input', function () {
      $("#Phones").prop('disabled',false);
    });
	$("#Email").trigger('input');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<select  id="Carrier">
	<option value="default">Please select a carrier</option>
	<option value="1">AT&amp;T</option>
	<option value="2">Verizon</option>
	<option value="3">Cricket</option>
	<option value="4">Ting</option>
	<option value="5">Sprint</option>
</select>

<select  id="Phones">
	<option value="default">Please select a device</option>
	<option value="1">Android</option>
	<option value="2">iPhone</option>
	<option value="3">Blackberry</option>
</select>

<input type="text" id="Email" />
点赞