我有一个有趣的问题没有找到任何答案:我在 Jquery Selectmenu 小部件中有一组字符串公司名称 + ID:
喜欢:
- 公司 1 - 00000023
- 非常大的公司名称 - 00000028
- 另一家名气很大的公司 - 09900023
所以我们得到了这个选择菜单:
但是我想这样配置:
- 公司 1 - 00000023
- 非常大的公司名称 - 00000028
- 另一家名气很大的公司 - 09900023
最终结果:
这是我的初始代码:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>Teste alignment</title>
<link href="jquery-ui.css" rel="stylesheet">
</head>
<body>
<h1>Test Selectmenu</h1>
<select id="selectmenu">
<option>Company 1 - 00000023</option>
<option>Company very large name - 00000028</option>
<option>Another Company that have a very very very large name - 09900023</option>
</select>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( "#selectmenu" ).selectmenu( {width: 800});
</script>
</body>
</html>
最佳答案
如前所述，您将需要使用 _renderItem。根据您的描述，您的字符串有特定格式:
[item] - [id number]
首先要做的是拆分和包装每个部分，以便我们可以使用 CSS 设置样式。
function styleString(s){
var result = "";
parts = s.split(" - ");
result += "<span class='item-title'>" + parts[0] + "</span> - <span class='item-id'>" + parts[1] + "</span>";
return result;
}
现在我们必须将它添加到我们的元素中。
$("#selectmenu").selectmenu({
width: 800
}).selectmenu("instance")._renderItem(function(ul, item){
var $li = $("<li>");
var item = styleString(item.value);
$li.append("<div>" + item + "</div>");
return $li.appendTo(ul);
});
您可以使用 item.value 或 item.label。
现在我们只需为元素设置样式。
$(function() {
function styleString(s) {
var result = "";
parts = s.split(" - ");
result += "<span class='item-title'>" + parts[0] + "</span> - <span class='item-id'>" + parts[1] + "</span>";
return result;
}
$("#selectmenu").selectmenu({
width: 800,
change: function(e, ui){
$("#selectmenu-button .ui-selectmenu-text").html(styleString(ui.item.value));
}
}).selectmenu("instance")._renderItem = function(ul, item) {
var $li = $("<li>");
var item = styleString(item.value);
$li.append("<div>" + item + "</div>");
return $li.appendTo(ul);
};
$("#selectmenu-button .ui-selectmenu-text").html(styleString($("#selectmenu-button .ui-selectmenu-text").text()));
});.ui-selectmenu-text .item-id {
position: absolute;
right: 3em;
}
.ui-menu-item .item-id {
float: right;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h1>Test Selectmenu</h1>
<select id="selectmenu">
<option>Company 1 - 00000023</option>
<option>Company very large name - 00000028</option>
<option>Another Company that have a very very very large name - 09900023</option>
</select>更新
在打开和更改的适当元素上使用相同的功能。也为其添加了 CSS。您没有在所选元素和菜单项中提到对此的需求。
关于jquery - 如何在 jquery ui selectmenu 中对齐字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48569871/