Question

我已动态创建下拉列表，尝试设置其大小但失败了......

code

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');

Answer 2

http://jsfiddle.net/LcC9W/

jquery的

var values=[0,1,2,3,500,700,100,565,475,52556,5225,1111];

$.each(values, function(k,v){
    $('#myselect').append($('<option>').val(v).html(v));
});
$('#myselect').css('width','200px');

HTML

<select id="myselect"></select>

ps：不要忘记将此代码放在文档就绪函数中，否则不会触发。（这在jsfiddle中不需要）

var values=[0,1,2,3,500,700,100,565,475,52556,5225,1111];

$(function(){

    $.each(values, function(k,v){
        $('#myselect').append($('<option>').val(v).html(v));
    });
    $('#myselect').css('width','200px');
})

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

2 个答案: