我不敢相信我无法在某个地方找到它，但我已经找了一段时间但找不到任何东西，所以我认为在这里值得一问。我需要什么:
<select>的功能菜单- 我可以放入元素的“选项”
- 不是 Twitter Bootstrap
就是这样。我有一个保存元素列表，您可以从中选择，但我还想在选项中添加一个小“x”图标或其他任何内容来删除它。
我想有人已经用 <ul> 做了这个或其他任何东西，但如果它在那里，我找不到它。我发现唯一的工作示例需要 Bootstrap，但我不想使用它。我可以自己写这个，但这会很麻烦，我希望它已经存在并且我可以省去麻烦。谢谢!
最佳答案
您可以从 jqueryui 调整选择菜单。 http://jqueryui.com/selectmenu/#custom_render
我开始了，请查看 fiddle 。
http://jsfiddle.net/htqdmdtd/3/
代码
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<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 );
}
});
$( "#filesA" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons" );
$( "#filesB" )
.iconselectmenu()
.iconselectmenu( "menuWidget" )
.addClass( "ui-menu-icons customicons" );
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
});
</script>
<style>
h2 {
margin: 30px 0 0 0
}
fieldset {
border: 0;
}
label {
display: block;
}
select {
width: 200px;
}
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-icon.video {
background: url("images/24-video-square.png") 0 0 no-repeat;
}
.ui-icon.podcast {
background: url("images/24-podcast-square.png") 0 0 no-repeat;
}
.ui-icon.rss {
background: url("images/24-rss-square.png") 0 0 no-repeat;
}
/* select with CSS avatar icons */
option.avatar {
background-repeat: no-repeat !important;
padding-left: 20px;
}
.avatar .ui-icon {
background-position: left top;
}
</style>
</head>
<body>
<div class="demo">
<form action="#">
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
<fieldset>
<label for="people">Select a Person:</label>
<select name="people" id="people">
<option value="1" data-class="avatar" data-style="background-image: url('http://retsmgr.discovermls.com/images/delete-16x16.gif');">John Resig</option>
<option value="2" data-class="avatar" data-style="background-image: url('http://retsmgr.discovermls.com/images/delete-16x16.gif');">Tauren Mills</option>
<option value="3" data-class="avatar" data-style="background-image: url('http://retsmgr.discovermls.com/images/delete-16x16.gif');">Jane Doe</option>
</select>
</fieldset>
</form>
</div>
JS
$('#people-menu').click(function(event){
if($(event.target).is('span.avatar')) {
$(event.target).parent('li').hide();
}
});
关于javascript - 选择菜单的替代方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25436040/