javascript - 如何更改动态创建的下拉列表的宽度？

Question

我已经动态创建了下拉菜单，试图设置它的大小但是失败了...

代码

var L = document.createElement('label');
    L.id = 'L_range';
    var S = document.createElement('select');
    S.id = 'range';
    var op1 = document.createElement('option');
    var op2 = document.createElement('option');
    var op3 = document.createElement('option');
    var op4 = document.createElement('option');
    op1.appendChild(document.createTextNode('10'));
    op1.id = '10';
    op2.appendChild(document.createTextNode('25'));
    op2.id = '25';
    op3.appendChild(document.createTextNode('50'));
    op3.id = '50';
    op4.appendChild(document.createTextNode('100'));
    op4.id = '100';
    S.appendChild(op1);
    S.appendChild(op2);
    S.appendChild(op3);
    S.appendChild(op4);
    L.appendChild(S);
    L.appendChild(document.createTextNode('records per page'));
    var root = document.getElementById('sel');
    root.innerHTML = '';
    root.appendChild(L);

我试过 S.size = '1'; 但没有区别。

Answer 1

size 属性不处理选择的宽度。 it just defines how many entries will be visible vertically, adding a scrollbar if needed (try the demo)。

只要通过 css 给它一个宽度就可以了，look at this fiddle

<select style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

或者通过 JS:

S.setAttribute('style', 'width:10px');