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元素是否可行。如果您不介意使用模拟选择元素，则可以执行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 2

你可以这样做。

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

＆＃13;

// 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();



});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

option

＆＃13;

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

＆＃13;

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

5 个答案: