如何在jquery ui selectmenu中对齐字符串答案

【问题标题】：How to aligns strings inside jquery ui selecmenu如何在jquery ui selectmenu中对齐字符串
【发布时间】：2018-07-12 04:45:50
【问题描述】：

我有一个有趣的问题，但没有找到任何答案：我在 Jquery Selectmenu Widget 中有一组字符串公司名称 + 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>

【问题讨论】：

欢迎来到 Stack Overflow。您将需要以自己的特殊方式呈现项目。请在此处查看：api.jqueryui.com/selectmenu 并查看 _renderItem 部分。

标签： jquery css user-interface jquery-ui

【解决方案1】：

如前所述，您需要使用_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。您没有在所选项目和菜单项中提到需要这样做。

【讨论】：

您好 Twist 和 AA Norman，非常感谢！但是最初的“关闭”选择菜单没有被格式化。