Выпадающий столбец HTML со скорректированными столбцами

Мне нужно выпадающее меню с несколькими столбцами. Я googled и нашел решение:

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

Однако столбцы не настраиваются друг под другом.

Как выглядит:

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

Как я хочу, он выглядит так:

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

Ответы

Ответ 1

внутри select недействителен HTML, насколько мне известно, однако это не сложно решить с помощью jquery (http://jsfiddle.net/upgradellc/ASR2K/2):

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:

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, чтобы шрифты выстроились в очередь:

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

Ответ 2

Это решение не ожидает определенного шрифта, оно измеряет ваш текст с вашим шрифтом.

Существует "магическое число" для сокращения пробелов между обоими столбцами, чем больше это число, тем ближе столбцы, но если он слишком велик, функция не работает (я использую 60 с моим шрифтом Verdana 12px).

Добавьте css с вашим шрифтом

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

Добавить диапазон на странице

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

Используйте функцию 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]);

        }
    });
}

Пояснение:

  • dd= выбрать элемент
  • separatorChars= обычно "-"
  • magicNumber= объяснено ранее

Ответ 3

Это можно решить с помощью div, css и jquery (http://jsfiddle.net/5hvd6k83/68/).

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:

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

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