Aligning/Дистанционные несколько переменных в выберите опцию

Question

У меня есть выбор, где для каждого варианта я перечисляю имя человека и их роль, в качестве примера:

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

Как вы можете видеть, есть достаточно пространства между имя человека и их роль, чтобы облегчить пользователю выбор правильного человека.

Однако есть ли способ, чтобы все роли могли совмещаться друг с другом? Я попытался использовать Len (personName), чтобы получить количество символов в имени человека и снять это с общего количества пробелов, но проблема здесь, очевидно, в буквах «i» и «m» по-прежнему считаются одним символом, хотя они разные ширины, поэтому он все еще не выравнивается.

Любая помощь будет высоко оценена.

Answer 1

Вы можете сделать выпадающий список с 2-мя колоннами, как так:

#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; 
 
}

<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>

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>