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

我有下面的HTML包含一个下拉列表（单选）

$（文档）.ready（函数（）{
$（“#garden”）.bind（'change'，function（）{
警报（“变更”）；
});
});
花
灌木丛
树
灌木丛

呈现HTML页面时，默认情况下，

Flowers

是下拉列表中已选择的元素（第一个）。如果我选择任何其他值（除了“Flowers”），Javascript函数将被激发，并显示一个包含“Changed”的警报框

问题1：但是，如果我再次重新选择

Flowers

，则不会触发

onchange

事件。我理解这是因为下拉列表中没有“更改”。是否有一种方法可以触发函数，即使下拉列表中已经选择的值没有更改

问题2：如何提取刚刚选择的元素的值（即使没有选择任何新的元素-也就是说，用户单击下拉列表，然后简单地单击其他地方）

我已经尝试了

onblur

，但这需要用户单击文档上的其他位置，以便下拉列表失去焦点。任何帮助都将不胜感激

---

[为了简洁起见，我在提供的代码片段中编辑了HTML标题和其他脚本内容。]

问题1：我认为这方面的活动将是“onSelect”

---

问题2：我认为“onSelect”活动也会起作用，但不是100%确定。至少要尝试和处理一些事情。

好吧，我想我不能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事件处理程序可能有点棘手，因为每次单击元素时它都会触发。但是，如果您没有
alert（）
每次都将其删除，则应该不会出现任何问题，您已获得当前选择，并且可以根据需要对其执行任何操作。
您可以在加载页面时手动触发事件：

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

这将获得初始值-因此我认为这使得你的第二个问题无关紧要。这不会在所有情况下都起作用（我希望您的实际处理程序不是警报，而是有用的东西！），但可能会派上用场……
您确定无论您做什么都是最明智的方式吗？与打开“选择”并选择当前选定的项目进行选择相比，如果您将某个项目保留为默认项来选择，则UI的行为似乎非常奇怪

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

如果你真的需要沿着下面的路径走下去，那么你可能想考虑一下人们的行为是什么。那也应该把你的剧本烧掉吗

编辑以详细回复评论：

在本例中，您要做的是钩住表单的onSubmit处理程序。正如您所想象的，当表单提交时，将调用此函数。如果处理程序返回false，则不会提交该表单

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

与以往一样，标准免责声明任何数据都可以由确定的用户发送到您的服务器，因此您不应仅因为您进行了此验证就认为您在服务器上获得了有效数据。：）
 在我看来，最简单的解决方案是将第一个选项复制到具有相同标签的禁用和隐藏元素中。下拉列表将显示隐藏选项的标签，但不会显示在列表中

<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>


花
花
笨蛋
树
灌木丛

你的问题和我的一样
上面提到的解决方案是由Simon Aronsson提供的

注：该解决方案与Firefox完美配合，但与Internet Explorer不配合。
不，onselect也不起作用：（。事实上，onselect甚至不会因为选择下拉菜单、重新选择某些选项、释放鼠标、单击文档中的任何其他位置而被解雇。你知道它的作用吗？（对不起，我是javascript和HTML的新手）嗯，这是一个有趣的建议。我会在试用后再回来。事实上，我问的只是因为我在加入我的应用程序之前尝试了事件处理。我确实理解目前的情况（默认与基于显式选择的js触发器）是一个糟糕的UI，而且“请选择一个”正是我想要的。问题是用户可能最终选择“请选择一个”，在这种情况下，我需要向他传达您的行为是无效的（我可以是被动的，也可以什么都不做，但这不是我的目的）。另一个问题是，限制他不选择“请选择一个”“-有什么提示吗？@Shrey:我回应了你的要求
<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>