Question

我有这个小问题，我在问是否有人可以帮助我。

我为每个选项添加了一个带有图标的选区。这非常酷的工作，但如果我尝试制作或调用onchange方法为此选择是不起作用。就好像这个方法不存在！如果我删除设计，那么一切都很好找，再次选择（没有设计）和onchange方法是朋友。

以下是我需要的人的代码这是选择：

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

使用此代码，我将设计提供给选择

<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!");
    });

Answer 1

您忘记输入'＃'并以字符串格式输入。

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

Answer 2

对于选择，“更改”不会以这种方式工作。添加此

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

Answer 3

只需将触发器change更改为selectmenuchange

即可

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

Answer 4

当使用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

设计选择中的onchange不起作用

4 个答案: