javascript - 根据元素宽度向 JavaScript 字符串添加空格

Question

我有一个表单，可以将用户添加到 2 个文本框(姓氏和名字)中的选择列表中。

当我单击“+”按钮时，它会添加一个选项，其中指定了下面的选择元素的姓氏和名字。现在，它添加了姓氏和名字之间只有一个空格的选项，但我希望名字与上面的“名字”文本框对齐。

这是我的示例代码的摆弄:http://jsfiddle.net/fx37j71s/12/

<table>
<tr>
    <td>Last Name</td>
    <td>First Name</td>
</tr>
<tr>
    <td><input type="text" id="txtlastname" /></td>
    <td><input type="text" id="txtfirstname" /></td>
    <td><input type="button" value="+" onclick="addemployee();" /></td>
</tr>
<tr>
    <td colspan="2"><select id="lbxname" size="5" style="width:500px"></select></td>
    <td valign="top"><input type="button" value="-"onclick="removeemployee();" /></td>
</tr>
</table>

还有 addemployee() 函数:

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');
    var text = document.createTextNode(lastname.value + ' ' + firstname.value);

    option.appendChild(text);
    select.appendChild(option);
}

有没有办法在 JS 或 jquery 或者 CSS 中实现这一点？我尝试添加固定数量的空格减去姓氏中的字符数，但字符串的实际宽度取决于字符(即“PPPPPP”比“lllll”宽，即使它们都有 5 个字符)。我还找到了“clientWidth”属性，但我似乎无法使其正常工作。

谢谢:)

Answer 1

可以设置innerHTML，而不是创建textNode

类似于:

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML = padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    while(str.length < 500){
        str += '&nbsp;';
    }    
    return str
}

DEMO