Javascript 中的柱结构<；选择>；标签

我试图通过CSS实现

中的列结构，我做了很多尝试，但没有成功

我试过的HTML

<select id="select-bill-period">
    <option>Select a bill period</option>
    <option><span>Current bill</span>&nbsp;&nbsp;<span>&pound;21.99</span></option>
    <option><span>20 Oct 2015</span>&nbsp;&nbsp;<span>&pound;45.99</span>&nbsp;&nbsp;<span>Archived</span></option>
    <option><span>20 Oct 2015</span>&nbsp;&nbsp;<span>&pound;45.99</span>&nbsp;&nbsp;&nbsp;<span>Archived</span></option>
    <option><span>20 Oct 2015</span>&nbsp;&nbsp;<span>&pound;45.99</span>&nbsp;&nbsp;&nbsp;<span>Archived</span></option>
</select>

选择票据期间
现钞&英镑；21.99
2015年10月20日英镑；45.99存档
2015年10月20日英镑；45.99存档
2015年10月20日英镑；45.99存档

---

做

对我来说不是可行的解决方案，我知道我们不能使用

标签或

标签内的任何其他标签。是否有任何解决方案可以打开

框中的列部分。

您可以使用jQuery实现这一点，我找到了一个jQuery插件，它可以帮助您根据需要创建一些内容，请查找以下链接：

var spacesToAdd=2；
var biggestLength=0；
$（“#时区选项”）。每个（函数（）{
var len=$（this）.text（）.length；
如果（长度>最大长度）{
最大长度=长度；
}
});
var padLength=biggestLength+spacesToAdd；
$（“#时区选项”）。每个（函数（）{
var parts=$（this.text（）.split（'+'）；
var strLength=零件[0]。长度；
对于（var x=0；x这是根据我的结构得出的正确答案…感谢@Roma。我采用了相同的逻辑，但做了一些修改。此解决方案与我定义的字体配合良好。不需要
字体系列：“Courier New”，Courier，monospace

$("#select-bill-period option").each(function(){
    var optionObj = $(this).text();

    if(optionObj.indexOf('+') > -1){ 
        optionObj = optionObj.split('+'); //if the string has + sign, split the string with + sign;

        //If the option has 2 column
        if(optionObj.length == 2){
            var strLength = optionObj[0].length - 1;

            for(var x=0; x< strLength; x++){
                optionObj[0] = optionObj[0]+' '; 
            }

            //Merge the text for the option
            $(this).text(optionObj[0].replace(/ /g, '\u00a0')+''+optionObj[1]);

        }else{
            var strLength = optionObj[0].length - 4;

            for(var x=0; x < strLength; x++){
                optionObj[0] = optionObj[0]+' '; //Add space after the 1st column
                optionObj[1] = optionObj[1]+' '; //Add space after the 2nd column                   
            }

            //Merge the text for the option
            $(this).text(optionObj[0].replace(/ /g, '\u00a0')+''+optionObj[1].replace(/ /g, '\u00a0')+optionObj[2]);
        }

    }else{ 
        $(this).text(optionObj); //else the text will be as it is, no need to append any space;
    }
});

$（“#选择票据期间选项”）。每个（函数（）{
var optionObj=$（this.text（）；
if（optionObj.indexOf（+'）>-1{
optionObj=optionObj.split（'+'）；//如果字符串有+号，则用+号拆分字符串；
//如果该选项有2列
if（optionObj.length==2）{
var strLength=optionObj[0]。长度-1；
对于（变量x=0；x
如果你需要那种级别的控制，你通常会使用
或其他任何东西构建一个伪选择控件，这样你就可以随心所欲地设计每个项目。投票人-ve你能给出解决方案吗？@nnnnnn，谢谢你的解决方案，但我需要选择框。不仅仅是一个下拉按钮或
ul
LI
structure。用户选择一个，我必须向他们显示哪个用户选择了，我必须根据这个显示结果。因此，这不是我的解决方案。我的意思是，您还将附加适当的事件处理程序等等，以便从用户的角度来看，它的行为非常类似于一个支架ard select元素，但您可以完全控制它的外观-您不必从头开始编写代码，因为有jQuery插件可以自动为您执行此操作。我认为此解决方案仅适用于单空间字体，如“Courier.”你好@Roma，谢谢你的建议。我只是稍微修改了一下你的逻辑。它对我很好。再次感谢。如果你想看的话，我已经在下面发布了我的解决方案。