带有调整列的 HTML 多列下拉列表

HTML multiple column drop down with adjusted columns

提问by gerrnar

I need a drop down menu with multiple columns. I googled and found a solution:

我需要一个包含多列的下拉菜单。我用谷歌搜索并找到了一个解决方案：

<select name="timezones">
    <option value="1">
        <column>Pacific/Auckland</column>
        <column>+12:00</column>
    </option>
    <option value="2">
        <column>Australia/Brisbane</column>
        <column>+10:00</column>
    </option>
</select>

However, the columns are not adjusted under each other.

但是，这些列不会相互调整。

How it looks:

它的外观：

Pacific/Auckland +12:00
Australia/Brisbane +10:00

How I want it looks like:

我希望它看起来像：

Pacific/Auckland    +12:00
Australia/Brisbane  +10:00

采纳答案by Max

inside of a select isn't valid HTML as far as I know, however this isn't hard to solve with jquery (http://jsfiddle.net/upgradellc/ASR2K/2):

据我所知，选择内部不是有效的 HTML，但是用 jquery ( http://jsfiddle.net/upgradellc/ASR2K/2)解决这个问题并不难：

html:

html：

<select name="timezones" id="timezones">
    <option value="1">Pacific/Auckland +12:00 </option>
    <option value="2">Australia/Brisbane +10:00 </option>
     <option value="3">Aust +10:00 </option>
    <option value="3">A +10:00 </option>
</select>

javascript:

javascript:

var spacesToAdd = 5;
var biggestLength = 0;
$("#timezones option").each(function(){
var len = $(this).text().length;
    if(len > biggestLength){
        biggestLength = len;
    }
});
var padLength = biggestLength + spacesToAdd;
$("#timezones option").each(function(){
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for(var x=0; x<(padLength-strLength); x++){
        parts[0] = parts[0]+' '; 
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0')+'+'+parts[1]).text;
});

css, to make sure the fonts line up:

css，以确保字体对齐：

select{
    font-family:"Courier New", Courier, monospace
}

回答by Luis Cambustón

This solution does not expect specific font, it measures your text with your font.

此解决方案不需要特定的字体，它会使用您的字体来衡量您的文本。

There is a "magic number" to shrink the spaces between both columns the bigger this number the closer the columns are but if it is too big the function won't work (I use 60with my font Verdana 12px).

有一个“神奇数字”可以缩小两列之间的空间，这个数字越大，列越近，但如果它太大，该功能将不起作用（我使用60我的字体Verdana 12px）。

Add css with your font

用你的字体添加 css

.measuring {
    font-size: 12px;
    font-family: Verdana,Arial,sans-serif;
    display:none;
}

Add span in your page

在页面中添加跨度

<span id="measuring" class="measuring"></span>

Use the function twoColumnDropDown().

使用函数twoColumnDropDown()。

function twoColumnDropDown(dd, separatorChars, magicNumber) {
    var biggestLength = 0;
    $(dd).find('option').each(function () {
        $("#measuring").text($(this).text().replace(separatorChars, ''));
        if ($("#measuring").width() > biggestLength) {
            biggestLength = $("#measuring").width();
        }
    });
    biggestLength = biggestLength - magicNumber;
    $(dd).find('option').each(function () {
        if ($(this).text() != "") {
            var parts = $(this).text().split(separatorChars);
            $("#measuring").text(parts[0]);
            $(this).text(parts[0] + String.fromCharCode(8202).repeat(biggestLength - $("#measuring").width()) + parts[1]);

        }
    });
}

Explanation:

解释：

• dd= select element
• separatorChars= usually "-"
• magicNumber= explained earlier

• dd= 选择元素
• separatorChars= 通常 "-"
• magicNumber= 之前解释过

回答by Wenmin Wu

This can be solved with div, cssand jquery(http://jsfiddle.net/5hvd6k83/68/).

这可以通过div,css和jquery( http://jsfiddle.net/5hvd6k83/68/)解决。

HTML:

HTML：

<textarea id="textarea" style="width:250px;height:100px;"></textarea>
<div class="dropdown">
  <div id="myDropdown" class="dropdown-content">
    <a>
      <div class="container">
        <div class="block word">con</div>
        <div class="block prob">20%</div>
        </div>
    </a>
    <a>
      <div class="container">
        <div class="block word">constant</div>
        <div class="block prob">20%</div>
        </div>
    </a>
  </div>
</div>

CSS:

CSS：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  vertical-align: middle;
}

.block {
  width: 60px;
  height: auto;
  margin: 3px;
  overflow: hidden;
}



.word {
  text-align: left;
}

.prob {
  text-align: right;
}


.dropdown-content {
  display: none;
  background-color: #f1f1f1;
  width: 300px;
  height: auto;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  display: block;
}

// .dropdown a:hover { background-color: #ddd; }
.show { display: block; }

Javascript:

Javascript：

const items = document.querySelectorAll("#myDropdown > a");

var preItem, currItem;

var tabCnt = 0;
const itemLen = items.length;

document.getElementById("myDropdown").classList.toggle("show");


$(document).delegate('#textarea', 'keydown', function(e) {
    var keyCode = e.keyCode || e.which;
  if (keyCode == 9) {
    e.preventDefault();
    currItem = items[tabCnt % itemLen];
    currItem.style.backgroundColor = 'lightblue';
    tabCnt += 1;
    if (preItem) {
        preItem.style.backgroundColor = '';
    }
    var word = $(currItem).find('.word');
    $('#textarea').text($(word).text());
    preItem = currItem;
  }
});

Result:

结果：