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

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，一旦您返回该菜单，上一个菜单仍然在该选择上，您无法再次选择该选项，然后再选择另一个首先。

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

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

非常感谢user4723924刷新了我看待问题的方式。

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

编辑编辑：这适用于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");
    })
});