选择预填充选项时的 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

你可以做这样的事情。

如果您需要始终在默认选择的选项上执行某些操作，则需要识别默认选项，因此，无论何时选择该选项，您都可以触发附加 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 2

您可以将<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 3

我不确定默认选择元素是否可行。如果您不介意使用模拟选择元素，您可以执行this 之类的操作：

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 4

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

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

Answer 5

您可以使用原生 DOM API 作为 jQuery 的替代方案，非常轻松地测试 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>