Question

我正在尝试为html下拉列表添加固定高度，它仅适用于第一次更改事件。如何在每次下拉事件更改时使其工作？ Here is my code

$("select#mySelect").on('focus',function(){
$('#mySelect').attr('size','5');
});
$("select#mySelect").on('change',function(){    
$('#mySelect').attr('size','1');
});

<select id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>

Answer 1

您应该使用mousedown事件而不是焦点，因为点击某个值后，选择不会丢失focus。

代码mousedown：

$("select#mySelect").on('mousedown',function(){
    $('#mySelect').attr('size','5');
});
    $("select#mySelect").on('change',function(){    
    $('#mySelect').attr('size','1');
});

如果您必须使用focus事件，则可以使用模糊事件来取消选择。

代码模糊：

$("select#mySelect").on('focus',function(){
    $('#mySelect').attr('size','5');
});
$("select#mySelect").on('change',function(){    
    $('#mySelect').attr('size','1');
    $('#mySelect').trigger('blur');
});

Demo mousedown

Demo blur

Answer 2

问题似乎只有在选择没有失去焦点并再次被选中时才出现。要解决此问题，我会使用类似mousedown的内容：

$("select#mySelect").on('mousedown',function(){
    $('#mySelect').attr('size','5');
});

Fiddle

Answer 3

也许这会起作用

$("select#mySelect").on('focus',function(){
$('#mySelect').attr('size','5');
});
$("select#mySelect").on('change',function(){    
$('#mySelect').attr('size','1');
    $('#mySelect').blur();
});
$("select#mySelect").on('blur',function(){    
$('#mySelect').attr('size','1');
});

你需要捕捉焦点事件然后将大小设置为5并且当你失去焦点时'模糊'将大小设置为1.当选择改变时你可以强制失去对焦的控制，但是它的原因是只有在第一次工作时才会在控件失去焦点时不做任何事情。所以要使上面的东西更整洁。

var mySelect = $("select#mySelect");
mySelect
.on('focus',function(){
    mySelect.attr('size','5');
})
.on('change',function(){    
    mySelect.blur();
})
.on('blur',function(){    
    mySelect.attr('size','1');
});

jquery选择大小属性更改

3 个答案: