Question

我有以下包含下拉列表的HTML（单选）

        <script type="text/javascript">
            $(document).ready(function () {
                $("#garden").bind('change', function() {
                    alert("Changed");
                    });
            });
        </script>
    <body>
        <div id="content">  
           <select id="garden">
             <option value="flowers">Flowers</option>
             <option value="shrubs">Shrubs</option>
             <option value="trees">Trees</option>
             <option value="bushes">Bushes</option>                 
           </select>
        </div>
    </body>
</html>

呈现HTML页面时，Flowers是默认情况下下拉列表中已选中的元素（是第一个）。如果我选择任何其他值（“Flowers”除外），则会触发javascript函数并显示包含“已更改”的警告框。

Q1：但是，如果我再次重新选择Flowers，则不会触发onchange事件。我理解这是因为下拉列表中没有任何“更改”。是否有一种方法可以触发功能，即使在下拉列表中没有更改已选择的值时也是如此？

Q2：如何提取刚刚选择的元素的值（即使没有选择任何新内容 - 也就是说，用户点击了下拉菜单，只需点击其他地方）。

我已经尝试了“onblur”，但这需要用户点击文档上的其他位置，以便下拉菜单失去焦点。任何帮助都会非常感激。

非常感谢。 [为了简洁起见，我在代码段中编辑了HTML标题和其他脚本内容。]

Answer 1

嗯，我认为我不会100％得到你，但我在这里建议的一些事情是：

将点击事件处理程序绑定到select

$("#garden").bind('click', function() {
     alert($(this).find('option:selected').text());
});

绑定focusout事件处理程序

$("#garden").bind('focusout', function() {
     alert($(this).find('option:selected').text());
});

当然绑定了你已经获得的change事件处理程序。 click event handler可能有点棘手，因为每次单击元素时它都会触发。但是如果你没有alert()每次它都不应该成为问题，那么你就得到了当前的选择，可以随心所欲地使用它。

Answer 2

您可以在加载页面时手动触发事件：

$(document).ready(function() {
    $("#garden").bind("change", function() {
        // ...
    }).change();
});

这将获得初始值 - 所以我认为它使你的第二个问题无关紧要。这不适用于所有情况（我希望你的实际处理程序不是警报，但实际上是有用的东西！），但可以派上用场......

Answer 3

你确定无论你做什么都是最明智的做事方式吗？如果您选择一个项目，将其保留为默认值，而不是通过打开选择并选择当前所选项目来选择项目，则看起来非常奇怪的UI。

如果你想让他们明确地选择鲜花，那么你可能想要在顶部写一个虚拟条目“请选择一个”，这意味着如果这是他们想要的话，他们将被迫实际换成鲜花。它可能比使用更多事件处理程序使代码复杂化更简单。

如果你真的需要走下你正在追踪的路径那么你可能想要考虑一下如果有人只是选中控件然后通过它就会发生什么行为。即是否应该解雇您的脚本？

编辑以及时回复评论：

在这种情况下，您想要做的是挂钩到表单的onSubmit处理程序。正如您所能想象的那样，当表单提交时，这称为。如果您的处理程序返回false，则不会提交该表单。

传统上，此处理程序通过检查您关注的任何表单元素的状态并检查其值是否有效来进行客户端验证。在这种情况下，您将检查花园的值是否为“N / A”或您设置的是什么，如果是，则弹出警报（在最简单的情况下）并可能标记需要注意的任何字段。然后用户将选择一个有效的条目（希望如此），下次他提交验证将成功，你在处理程序中返回true，用户可以很高兴他提交了有效的输入。

与往常一样，标准免责声明任何数据都可以由确定的用户发送到您的服务器，因此您不应该假设您已经通过验证，即您在服务器上获得了有效数据。：）

Answer 4

问题1：我认为此事件将是“onSelect”。

问题2：我认为“onSelect”事件也适用于此，而不是100％肯定。至少要尝试一些东西。＃/ p>

Answer 5

在我看来，最简单的解决方案是将第一个选项复制到具有相同标签的禁用和隐藏元素中。您的下拉列表将显示隐藏选项的标签，但不会显示在列表中。

<select id="garden" name="blabla" onchange="this.form.submit();" >
  <option value="" disabled selected style="display:none;">Flowers</option>
  <option value="flowers" >Flowers</option>
  <option value="shrubs" >Schrubs</option>
  <option value="trees" >Trees</option>
  <option value="bushes" >Bushes</option>
</select>

您的问题与HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed相同以上提到的解决方案由Simon Aronsson提供。

Nota bene：该解决方案与Firefox完美配合，但与Internet Explorer无关。

HTML select元素onchange触发已选择的选项

5 个答案: