使用“nice-select”jQuery插件设置选择标签样式时，选择标签.on（'change'）的.val（）不起作用

Question

我在 html 中有一个普通的选择标签

<div>
 <select name="sort-by" id="sort-by" class="nice-select show-menu-arrow">
  <option value="sortby">Sort By..</option>
  <option value="Section">Section</option>
  <option value="Alphabetical">Alphabetical</option>
  <option value="Time">Time</option>
</select>

当我的表单中发生以下任一事件时，jQuery 中的以下代码将发送 AJAX 请求（使用选择标签的 .val()）：选择标签发生变化、单击复选框或字符在搜索栏中输入。

$("#filter-words select,  #filter-words input[type='checkbox'], #filter-words input[type='text']").on('change keyup', function() {

var sortBy = $("#filter-words select#sort-by").val();

在我使用 jQuery 插件“nice-select”之前，这段代码运行良好 (http://hernansartorio.com/jquery-nice-select/)

使用此插件时，.on('change') 事件在 select 标签上不起作用。这样做的原因（我相信）是，根据 nice-select 页面（上面的链接），在使用插件时，这是：

<select>
  <option value="1">Some option</option>
  <option value="2">Another option</option>
  <option value="3" disabled>A disabled option</option>
  <option value="4">Potato</option>
</select>

变成这样：

<div class="nice-select">
  <span class="current">Some option</span>
  <ul class="list">
    <li class="option selected">Some option</li>
    <li class="option">Another option</li>
    <li class="option disabled">A disabled option</li>
    <li class="option">Potato</li>
  </ul>
</div>

所以我的问题是：

我怎样才能解决这个问题？根据这个问题 (Change function stop working when I add Dropkick or MultiSelect plugins to style Select elements)，选择标签插件 DropKick 和 MultiSelect 对此进行了记录，但我似乎无法找到有关此问题的任何文档用于 nice-select。

Answer 1

看起来 nice-select 正在使用 jQuery 的 .html() 函数复制原始选择，因此附加到原始选择的任何绑定都将被破坏。您可以使用delegated event binding...

来解决这个问题

它需要指向选择的包装器。例如

<div class="wrapper">
  <select id="sort-by">
    ...
  </select>
</div>

然后使用以下代码绑定到选择：

$(".wrapper").on('change', 'select', function() {
  var sortBy = $("#sort-by").val();
  // do whatever with the value
});

Answer 2

我找到了解决办法：

基本上，我所做的就是使用以下代码监听 div 中的 DOM 更改，该更改包装了 select：

var observeDOM = (function(){
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
    eventListenerSupported = window.addEventListener;

return function(obj, callback){
    if( MutationObserver ){
        // define a new observer
        var obs = new MutationObserver(function(mutations, observer){
            if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                callback();
        });
        // have the observer observe foo for changes in children
        obs.observe( obj, { childList:true, subtree:true });
    }
    else if( eventListenerSupported ){
        obj.addEventListener('DOMNodeInserted', callback, false);
        obj.addEventListener('DOMNodeRemoved', callback, false);
    }
}
})();

// Observe a specific DOM element:
observeDOM( document.getElementById('wrapper'), function(){ 
  $hidden_input = $("input[name='hidden_checkbox']");

  if( $hidden_input.prop('checked') === true ) {
    $hidden_input.click();
  } else {
    $hidden_input.click();
  }
});

当在 div 内部检测到带有包装器 id 的更改时，我选中了一个包含在 html 中的复选框：

<input type="checkbox" name="hidden_checkbox" value="hidden_checkbox" id="hidden_checkbox"  />

jQuery 中的这段代码运行 $("input[type='checkbox']).on('change')

$("#filter-words select,  #filter-words input[type='checkbox'], #filter-words input[type='text']").on('change keyup', function() {

var sortBy = $("#filter-words select#sort-by").val();

Answer 3

大家好，我找到了解决办法。

我更新了 nice-select.min.js 文件

130号线

改变这个

  $dropdown.prev('select').val($option.data('value')).trigger('change');

作者：

 $dropdown.prev('select').val($option.data('value')).trigger('click');
 $dropdown.toggleClass('open');

它对我有用，我希望它对你有用。

Answer 4

Javier-您的代码更改确实为我节省了很多时间！

唯一要提的是编辑后：nice-select.min.js 文件

该解决方案使您现在可以使用“onClick”而不是“onChange”来获取值，由于某种原因，一个有效而另一个无效（onclick 确实有效）。如果你在 reactJS 中工作，也很方便，现在你可以使用了。

Answer 5

我认为最简单的方法是使用

$(document).on("change",".yourclass-on-select", function () {

});

代替

$(".yourclass-on-select").on("change", function () {

});

对我有用

Answer 6

我通过在我的 JS 文件中添加这个 sn-p 解决了这个问题，因为我不想更改原始的 nice-select 文件：

$(document).on('change', '.styled-select', function (e) {
    e.target.dispatchEvent(new Event('change'));
});

所以这里发生的事情是我监听库触发的change 事件并启动正确的change 事件，该事件确实有效。在某些情况下，这可能会导致双重事件，如果库能正确执行此操作当然会更好，但他们似乎不接受他们 GitHub 项目上的拉取请求......

Answer 7

您只需要使用库文件中的相同函数即可。

    $(document).on("click", ".nice-select .option:not(.disabled)", function (t) {
                                            
    var s = $(this),
    n = s.closest(".nice-select");
                                            
    console.log(s.data("value"));
})

这仅适用于点击事件。您还可以从库中获取 keydown 事件