HTML多列下拉列表和调整列 [英] HTML multiple column drop down with adjusted columns

问题描述

我需要一个包含多列的下拉菜单。我搜索了一下，发现了一个解决方案：

 < select name =timezones> 
< option value =1> 
< column> Pacific / Auckland< / column> 
< column> +12：00< / column> 
< / option> 
< option value =2> 
<专栏>澳大利亚/布里斯班< /< /> 
< column> +10：00< / column> 
< / option> 
< / select> 
  

然而，这些列并未相互调整。

$ p
$ b $ pre $ 太平洋/奥克兰+12：00
澳大利亚/布里斯班+10： 00


我想如何看起来像：

 太平洋/奥克兰+12：00 
澳大利亚/布里斯班+10：00 
  

$ b $在一个选择的内部是无效的HTML据我所知，但这并不难用jquery解决（ http://jsfiddle.net/upgradellc/ASR2K/2 ）：

html：

 < select name =timezonesid =timezones> 
< option value =1> Pacific / Auckland +12：00< / option> 
< option value =2>澳大利亚/布里斯班+10：00< / option> 
< option value =3> Aust +10：00< / option> 
< option value =3> A +10：00< / option> 
< / select> 
  

javascript：

  var spacesToAdd = 5; 
 var maximumLength = 0; 
 $（＃timezones option）。each（function（）{
 var len = $（this）.text（）。length; 
 if（len> largestLength）{
 largestLength = len; 
} 
}）; 
 var padLength = largestLength + 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，'\\\ '）+'+'+ parts [1]）。text; 
}）; 
  

css，确保字体排列齐整：

  select {
 font-family：Courier New，Courier，monospace 
} 
  

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

解决方案

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:

<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, to make sure the fonts line up:

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

这篇关于HTML多列下拉列表和调整列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！