选择预填充选项时的Javascript事件

Question

我有一个充满选择元素的表，其中一些预先填写了我正在处理的数据迁移项目的建议。 我知道如何监听更改事件（jQuery），但我也想听取用户选择建议选项的时间。 那可能吗？

我试着听一下点击但是只有在打开选择框而不是关闭时才会调用。

更新

简单再现问题 -

HTML -

<select>
  <option value="">One</option>
  <option value="" selected>Two</option>
  <option value="">Three</option>
</select>

<p></p>

JS

$('select').change(function() {
    $('p').append('x');
});

https://jsfiddle.net/sh9n2cvg/

更新2

到目前为止我发现的最好的是这个，但它仍然是一个小马车 -

$('select').click(function() {
    $(this).val("");
    $(this).trigger('change');
});

更新3我不认为我想做的事情是可能的。 这是我的解决方法 - https://stackoverflow.com/a/5859221/772309

Answer 1

我不确定使用默认的select元素是否可行。 如果你不介意使用一个模拟的select元素，你可以做类似这样 ：

 var was = $('select').val(); $('select') .selectmenu() .on('selectmenuclose',function(event){ var is = $('select').val(); if(was == is) { $('p').append("<br>reselected "+is); } else { $('p').append("<br>changed to "+is); } was = is; }); 

 <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <select> <option value="one">One</option> <option value="two" selected>Two</option> <option value="three">Three</option> </select> <p></p> 

---

如果你只是想让触发器只在选择一个选项时发生（而不是模糊等），这就可以了：

 var was = $('select').val(); $('select') .selectmenu() .on('selectmenuselect',function(event, ui){ var is = ui.item.value; if(was == is) { $('p').append("<br>reselected "+is); } else { $('p').append("<br>changed to "+is); } was = is; }); 

 <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <select> <option value="one">One</option> <option value="two" selected>Two</option> <option value="three">Three</option> </select> <p></p> 

Answer 2

你可以这样做。

如果您需要始终在默认选择选项上执行某些操作，则需要标识默认选项，因此，无论何时选择该选项，您都可以触发附加x。

 // I want it to output "x" when "Two" is reselected $(function() { $('select').change(function(e) { if ($("option:selected", $(e.currentTarget)).attr("data-default")) { $('p').append('x'); } }); $('select').each(function(idx, ele) { $("option:selected", $(ele)).attr("data-default", "true") }); $('select').change(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="">One</option> <option value="" selected>Two</option> <option value="">Three</option> </select> <p></p> 

如果您希望为所有更改事件和初始默认选择附加x到p，则可以执行以下操作。

 // I want it to output "x" when "Two" is reselected $(function() { $('select').change(function(e) { $('p').append('x'); }); $('select').change(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value="">One</option> <option value="" selected>Two</option> <option value="">Three</option> </select> <p></p> 

Answer 3

您可以将<ul> ， <li>元素替换为<select> ， <option>元素; 样式ul ， li元素显示为select ， option菜单，使用click事件选择li元素

 $(function() { var p = $("#select + p"); var options = ["One", "Two", "Three"]; $.each(options, function(index, option) { $("<li>", { html: "\\n" + option, appendTo:"#select", css: { listStyle: "none", width: "142px", padding: "8px", margin: "1px", outline: "1px solid #000", fontFamily: "arial", height:"16px", backgroundColor:"#eee" }, on: { "mouseenter": function() { if (!$(this).is("li:first")) { $(this).css("backgroundColor", "orange") } }, "mouseleave": function() { $(this).css("backgroundColor", "#eee") } } }) }); $("#select li:not(:first)") .hide() .siblings(":first") .clone(true) .hide() .insertAfter("#select li:first") .parent() .click(function(e) { if ($(e.target).is("li:first")) { $(e.target).closest("li").siblings().toggle() } else { $(e.target).closest("ul") .find(":first") .html($(e.target).closest("li").html()) .trigger("mouseleave") .siblings().toggle(); p.append("x" + $("li:first").text() + "<br>") } }) }); 

 ul { appearance: button; -moz-appearance: button; -webkit-appearance: button; -webkit-padding-start: 0px; width: 160px; height: 32px; left: 24px; position: relative; } ul li:nth-child(1) { background-color:buttonface !important; } ul li:nth-child(1):after { position: absolute; content: "▼"; right: 10px; top: 10px; font-size: 12px; opacity: .75; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <ul id="select" class="select"></ul> <p></p> 

Answer 4

使用jQuery更改事件，您可以通过使用$（'yourselect'）。val（）来查看用户的选择选项是否与系统所建议的选项相匹配，以查看选择的选项选择值是什么。

$('yourselect').on('change', function() {
    var selected = $(this).val();
    if(selected === 'Expected') {
        // do this
    }
});

Answer 5

作为jQuery的替代方法，您可以使用本机DOM API轻松测试select的值。 这种方法确实需要您将每个option的value设置为某个唯一的字符串; 下面我只是用你所拥有的任何显示文字。

 document.getElementById('example-select').addEventListener('change', function () { console.log(this.value) if (this.value === 'Two') { // do stuff document.getElementById('example-output').textContent += 'x' } }); 

 <select id="example-select"> <option value="One">One</option> <option value="Two" selected>Two</option> <option value="Three">Three</option> </select> <p id="example-output"></p>