Question

我试图让我的'搜索类'菜单在失去焦点后重置为默认值，因为我有几个'选择'菜单由以下操作，并且当在不同的'选择类'菜单之间切换时一切正常但在使用不同时“搜索类”菜单位于同一“选择类菜单”中。

$(document).ready(function () {
    $('.panel').hide();
    $('.search').hide();
    $('#start').show();
    $('.window').change(function () {
        $('.panel').hide();
        $('#'+$(this).val()).show();
    })
    $('.choice').change(function () {
        $('.search').hide();
        $('#'+$(this).val()).show().find('option:first-child').attr({ selected : true, disabled : true }).trigger("change");
    })
});

我的问题是，一旦第一个“搜索类”菜单失去焦点而另一个被选中并用于显示附加的div，上一个菜单仍然在该选项上，一旦你返回它就不能再次选择该选项先选择另一个。

这是我的Select的简短版本，如果它有助于构建图片

<div class="search" id="family">
  <select class="window">
    <option>
      --Please make a selection--
    </option>
    <option value="clear">
      --Clear--
    </option>
  </select>
</div>
<div class="search" id="type">
  <select class="window">
    <option>
      --Please make a selection--
    </option>
    <option value="full">
      --Full--
    </option>
  </select>
</div>

我希望任何“搜索类”菜单失去焦点以返回第一个选项。也许我应该使用.focusout（function（）但我不太了解这种语言，不知道我在做什么是对还是错。

编辑以更好地解释。

Answer 1

你可以像这样设置一个选择值......

YourID.selectedIndex=3;

例如......

<select id="abc" onchange="SomeFunc(this.value); this.selectedIndex=0;">
 <option value="0" selected>click to select</option>
 <option value="1">one</option>
 <option value="2">two</option>
 <option value="3">three</option>
 <option value="4">four</option>
</select>

Answer 2

经过几天的失败后，我终于解决了我的问题，这是我的解决方案

    $("select").blur(function () {
        $(this).find('option:first-child').attr({ selected : true, disabled : true });
    })

然后我将其添加到上面已有的内容中。

$(document).ready(function () {
    $('.panel').hide();
    $('.search').hide();
    $('#start').show();
    $('.window').change(function () {
        $('.panel').hide();
        $('#'+$(this).val()).show();
    })
    $('.choice').change(function () {
        $('.search').hide();
        $('#'+$(this).val()).show();
    })
    $("select").blur(function () {
        $(this).find('option:first-child').attr({ selected : true, disabled : true });
    })
});

感谢用户4723924，让我了解我的问题。

编辑：我的修复程序适用于jQuery v1.3.2，这是我正在使用的。我尝试使用jQuery v3.3.1，它停止工作。我不知道或不明白为什么。我将看看我是否可以找到适用于最新版本jQuery的修复程序，并在找到后将其发布到此处。

EDITEDIT：这适用于jQuery v3.3.1

$(document).ready(function () {
    $('.panel').hide();
    $('.search').hide();
    $('#start').show();
    $('.window').change(function () {
        $('.panel').hide();
        $('#'+$(this).val()).show();
    })
    $('.choice').change(function () {
        $('.search').hide();
        $('#'+$(this).val()).show();
    })
    $("select").blur(function () {
        $(this).find('option:first-child').prop("selected", "selected");
    })
});

焦点丢失时如何重置选择菜单？

2 个答案: