Question

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

<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请求（使用select标记的.val（））当我的表单中发生以下任一事件时：select标签更改，单击复选框或字符进入搜索栏。

$("#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插件＆＃34; nice-select＆＃34; （http://hernansartorio.com/jquery-nice-select/）

使用此插件时，.on（＆＃39;更改＆＃39;）事件不会对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已经记录了这一点，但我似乎无法找到关于这个问题的任何文档以进行精选。

Answer 1

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

来解决这个问题

需要指向select周围的包装器。例如

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

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

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

Answer 2

我找到了解决方案：

基本上我所做的就是使用以下代码在div中搜索包含select的DOM更改：

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中的这段代码运行$（＆＃34;输入[type =＆＃39;复选框＆＃39;]）。on（＆＃39; change＆＃39;）

$("#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 文件中添加此代码段解决了这个问题，因为我不想更改原始的 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 事件

在使用＆＃34; nice-select＆＃34;时，获取选择标记.on（＆＃39;更改＆＃39;）的.val（）不起作用用于设置选择标记

7 个答案:

在使用＆＃34; nice-select＆＃34;时，获取​​选择标记.on（＆＃39;更改＆＃39;）的.val（）不起作用用于设置选择标记

7 个答案:

在使用＆＃34; nice-select＆＃34;时，获取选择标记.on（＆＃39;更改＆＃39;）的.val（）不起作用用于设置选择标记