设计选择中的Onchange不起作用

onchange in designed select doesn't work

本文关键字：Onchange 不起作用 选择      更新时间：2023-09-26

我有一个小问题，我想问一下是否有人可以帮助我。

我有一个设计的选择与每个选项的图标。这很酷，但如果我尝试为这个select调用onchange方法就行不通了。就像如果这个方法不存在!如果我删除了设计，那么一切都很容易找到，并且select(没有设计)和onchange方法是朋友。

这是我的代码在情况下，有人需要这是select:

<select id="select" class="form-control">
            <option value="de" data-class="deu" id="de" selected>1</option>
            <option value="en" data-class="eng" id="en">2</option>                     
</select>
用下面的代码，我给出了select 的设计
<script>
$(function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>", { text: item.label } );
        if ( item.disabled ) {
          li.addClass( "ui-state-disabled" );
        }
        $( "<span>", {
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr( "data-class" )
        })
          .appendTo( li );
        return li.appendTo( ul );
      }
    });
    $( "#select" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );

  });
</script>
<style>
    .ui-icon.deu {
      background: url("/img/de.png") 0 0 no-repeat;
    }
    .ui-icon.eng {
      background: url("/img/gb.png") 0 0 no-repeat;
    }
</style>

这是我的onchange

$(select).change(function(){
        alert("Schön!");
    });

您忘记键入'#'，而且还键入字符串格式。

$("#select").change(function(){
    alert("Schön!");
});

对于select， "change"不会以这种方式工作。添加这个

  $("#select").change(callFunction);//call function
  //define it
  function callFunction(){
   alert("Schön!");
 }

只需将触发器change更改为selectmenuchange 

$("#select").on('selectmenuchange',function(){
    alert("Schön!");
});

当使用jqueryUI小部件时-我认为(不是100%确定)-更改事件需要添加selectmenu事件

$.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function (ul, item) {
        var li = $("<li>", {
            text: item.label
        });
        if (item.disabled) {
            li.addClass("ui-state-disabled");
        }
        $("<span>", {
            style: item.element.attr("data-style"),
                "class": "ui-icon " + item.element.attr("data-class")
        })
            .appendTo(li);
        return li.appendTo(ul);
    }
});
$("#select")
    .iconselectmenu({
    change: function (event, ui) {
        console.log('here')
    }
})
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons customicons");

jsFiddle

相关文章：