Question

我正在尝试在＆lt; select＆gt;中实现列结构通过CSS，我尝试了很多，但没有成功。我试过的HTML，＆lt; select id =＆＃34; select-bill-period＆＃34;＆gt; ＆lt; option＆gt;选择帐单周期＆lt; / option＆gt; ＆lt; option＆gt;＆lt; span＆gt;当前账单＆lt; / span＆gt;＆amp; nbsp;＆amp; nbsp;＆lt; span＆gt;＆amp; pound; 21.99＆lt; / span＆gt;＆lt; / option＆gt; ＆lt; option＆gt;＆lt; span＆gt; 2015年10月20日＆lt; / span＆gt;＆amp; nbsp;＆amp; nbsp;＆lt; span＆gt;＆amp; pound; 45.99＆lt; / span＆gt;＆amp; nbsp;＆amp; nbsp;＆lt; span＆gt; Archived＆lt ; /跨度＆GT;＆LT; /选项＆GT; ＆lt; option＆gt;＆lt; span＆gt; 2015年10月20日＆lt; / span＆gt;＆amp; nbsp;＆amp; nbsp;＆lt; span＆gt;＆amp; pound; 45.99＆lt; / span＆gt;＆amp; nbsp;＆amp; nbsp;＆amp; nbsp;＆lt; ;跨度＆GT;存档＆LT; /跨度＆GT;＆LT; /选项＆GT; ＆lt; option＆gt;＆lt; span＆gt; 2015年10月20日＆lt; / span＆gt;＆amp; nbsp;＆amp; nbsp;＆lt; span＆gt;＆amp; pound; 45.99＆lt; / span＆gt;＆amp; nbsp;＆amp; nbsp;＆amp; nbsp;＆lt; ;跨度＆GT;存档＆LT; /跨度＆GT;＆LT; /选项＆GT; ＆LT; /选择＆GT; 做＆amp; nbsp;对我来说不是可行的解决方案，我知道我们不能使用＆lt; span＆gt;标签或其中任何其他标签＆lt; option＆gt;标签。是否有任何解决方案来实现＆lt; select＆gt;中的列部分框。

Answer 1

＆＃13;

UPDATE [Members] SET [Credits]=[Credits]+@FreeCredits WHERE [ID] IN (SELECT [MemberID] FROM @Members) AND [ActivePlan] IS NULL

＆＃13;

var spacesToAdd = 2;
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;
});

＆＃13;

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

＆＃13;

Answer 2

你可以使用jQuery实现这一点，我找到了一个jQuery插件，可以帮助你根据你的要求创建一些东西，找到下面的链接：

<强> multiple column select box

Answer 3

根据我的结构，这是正确的答案......感谢@Roma。我采取了相同的逻辑，但修改了一下。这个解决方案可以正常使用我定义的字体。不需要font-family:"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;
    }
});

<select>标记中的列结构

3 个答案: