如何处理 jQuery UI Selectmenu 更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24596408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to handle jQuery UI Selectmenu change event
提问by Tarek Saied
i use jquery ui select menu with custom render option
我使用带有自定义渲染选项的jquery ui 选择菜单
how i can handle the changeevent ?
我如何处理该change事件？
i try
我试试
$('#filesA').on('change', function() {
alert( 'x');
});
but its not working with jQuery UI Selectmenu
但它不适用于 jQuery UI Selectmenu
and also i try
我也尝试
$( "#filesA" ).selectmenu({
change: function( event, ui ) {}
});
it's working but it's create another select menu instance !!
它正在工作，但它正在创建另一个选择菜单实例！
my js code
我的js代码
$( document ).ready(function() {
$( "#filesA" ).selectmenu({ change: function( event, ui ) { alert('x'); }});
$.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 );
}
});
$( "#filesA" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons" );
});
and my html code
和我的 html 代码
<label class="langLabel" for="filesA">Select your language:</label>
<select name="filesA" id="filesA">
<option value="lan1">Test Lang1</option>
<option value="lan2">Test Lang2</option>
<option value="lan3">Test Lang3</option>
<option value="lan4">Test Lang4</option>
<option value="lan5">Test Lang5</option>
</select>
回答by fakechrist
just change the trigger 'change'to 'selectmenuchange'
只需将触发器更改'change'为'selectmenuchange'
$('#filesA').on('selectmenuchange', function() {
alert( 'x');
});
回答by j809
Take a look here: http://jsfiddle.net/JLVSM/
看看这里：http: //jsfiddle.net/JLVSM/
Just change your code to:
只需将您的代码更改为：
$( "#filesA" ).selectmenu({ change: function( event, ui ) { alert('x'); }});
$.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 );
},
});
$( "#filesA" ).addClass( "ui-menu-icons" );
回答by user1528178
I had the same problem. Overcame it eventually with iconselectmenu instead of selectmenu
我有同样的问题。最终用 iconselectmenu 而不是 selectmenu 克服了它
$( "#filesA" ).iconselectmenu({ change: function( event, ui ) { alert('x'); }});
回答by user1528178
Or more specifically...
或者更具体地说...
$(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 );
}
});
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );
$('#filesB').iconselectmenu({
change: function( event, ui) {
alert('something has changed');
}
});
});
回答by Luis Pe?a
I solved this way:
我是这样解决的：
$.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 );
},});
$("#filesA").iconselectmenu({ change: function( event, ui ) { alert("Hi"); s}}).iconselectmenu( "menuWidget" ).addClass( "ui-menu-icons" );
