已选择选项的 HTML 选择元素 onchange 触发器 [英] HTML select element onchange trigger for already selected option

查看：24 发布时间：2021/12/19 15:11:13 javascript html jquery select jquery-events

本文介绍了已选择选项的 HTML 选择元素 onchange 触发器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 HTML 包含下拉列表(单选)

 <身体><div id="内容"><选择id=花园"><option value="flowers">Flowers</option><option value="shrubs">Shrubs</option><option value=trees">Trees</option><option value="bushes">Bushes</option></选择>

渲染 HTML 页面时，Flowers 是默认下拉列表中已选择的元素(第一个).如果我选择任何其他值(Flowers"除外)，则 Javascript 函数会被触发，并且会出现一个包含Changed"的警告框.显示.

问题 1:但是，如果我再次重新选择 Flowers，则不会触发 onchange 事件.我知道这是因为下拉列表中没有更改".即使未更改下拉列表中已选择的值，是否也可以触发函数?

Q2:如何提取刚刚选择的元素的值(即使没有选择任何新元素——也就是说，用户点击下拉菜单，然后简单地点击其他地方).

我已经尝试过 onblur 但这要求用户单击文档上的其他位置，以便下拉菜单失去焦点.任何帮助将不胜感激.

[为简洁起见，我在代码片段中编辑了 HTML 标头和其他脚本内容.]

解决方案

好吧，我想我没有 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() 每次都不应该出现问题，那么您将获得当前选择并可以随心所欲地使用它.

I have the following HTML containing a drop down list (single selection)

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

When the HTML page is rendered, Flowers is the already selected element in the drop-down by default (being the first one). If I select any other value (other than "Flowers"), the Javascript function is fired and a alert box containing "Changed" is shown.

Q1: But, in case I re-select Flowers again, the onchange event is not triggered. I understand it is because nothing was 'changed' in the drop-down list. Is there a way a function is triggered even when no change to the already selected value in drop-down is done?

Q2: How to extract the value of the element which has just been selected (even if nothing new was selected - that is, user clicked on the drop down, and simply clicked somewhere else).

I have already tried the onblur but that requires that the user clicks somewhere else on the document so that the drop-down loses focus. Any help would be really appreciated.

[I have edited out the HTML headers and other script inclusions in the code snippet provided for brevity.]

解决方案

Well I think I don't get you 100%, but some things I can suggest here are:

bind a click event handler to the select

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

bind a focusout event handler

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

and of course bind the change event handler which you already got. The click event handler might be a little bit tricky since it would fire every time you click on the element. But if you don't alert() it every time it should not be a problem at all, you got the current selection and can do with it whatever you want.

这篇关于已选择选项的 HTML 选择元素 onchange 触发器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

已选择选项的 HTML 选择元素 onchange 触发器 [英] HTML select element onchange trigger for already selected option

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

已选择选项的 HTML 选择元素 onchange 触发器 [英] HTML select element onchange trigger for already selected option

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭