Question

我有一个选择每个选项的位置，我列出了这个人的名字和他们的角色，例如：

John Smith            Teacher
Ronald MacDonald    Doctor
Jane Hope            Secretary
John Smith            Chef

正如您所看到的，这个人的名字和他们的角色之间有足够的空间，使用户更容易选择正确的人。

然而，是否有一种方法可以使角色彼此一致？我尝试使用Len（personName）来获取一个人姓名中的字符数，并将其从空格的总数中取出，但这里的问题显然是字母“我”。和＆＃39; m＆＃39;仍然算作一个字符，虽然它们的宽度不同，所以仍然不对齐。

非常感谢任何帮助。

Answer 1

您可以创建一个包含2列的下拉列表，如下所示：

＆＃13;

#dropdown-menu {
    list-style:none;
}
#dropdown-menu ul.left-side {
    float:left;
    width:150px;
    list-style:none;
    vertical-align:top;
    display:inline=-block;
}
#dropdown-menu ul.right-side {
    float:left;
    width:70px;
    list-style:none;
    vertical-align:top;
    display:inline-block;
}

＆＃13;

<ul id="dropdown-menu">
    <ul class="left-side">
        <li>Ronald MacDonald</li>
        <li>John Smith</li>
        <li>Ronnie Corbett</li>
        <li>Jane Austen</li>
    </ul>
    <ul class="right-side">
        <li>Teacher</li>
        <li>Doctor</li>
        <li>Comedian</li>
        <li>Chef</li>
    </ul>
</ul>

＆＃13;

Answer 2

遗憾的是，如果没有严肃的解决方法，就无法对齐option内容。如果您想保留原始HTML select，可以尝试这种方法（它使用等宽字体）。

是的，对象的字段是硬编码的。对我感到羞耻。

$(function () {
    var crew = [
        { name: "John Doe", rank: "Captain" },
        { name: "Just Someguy", rank: "Seaman" },
        { name: "And Someone", rank: "Seaman" }
    ];
    
    var getLongestFirstColumnValue = function(data) {
        var maxLength = data[0].name.length;
        for (var i = 1; i < data.length; i++) {
            if (data[i].name.length > maxLength) {
                maxLength = data[i].name.length;
            }
        }
        return maxLength;
    }
    
    var placeholderSize = getLongestFirstColumnValue(crew) + 5;
    
    var convertPlaceholderToSpaces = function(count) {
        var spaces = "";
        for (var i = 0; i < count; i++) {
            spaces += "&nbsp;";
        }
        return spaces;
    }
    
    var buildOption = function(person, firstColumnPlaceholder) {
        var formattedContent = person.name + convertPlaceholderToSpaces((firstColumnPlaceholder - person.name.length)) + person.rank + "&nbsp;&nbsp;";
        return "<option value=\"" + person.name + "\">" + formattedContent  + "</option>";
    };
    
    for (var i = 0; i < crew.length; i++) {
        $("#test-select").append(buildOption(crew[i], placeholderSize));
    }
});

#test-select {
    font-family: "Courier New";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test-select">
</select>

在选择选项中对齐/间隔多个变量

2 个答案: