如何控制select下拉选项的高度

Posted 2023-05-13

众所周知，select要设置宽度很简单，但是真要设置它的高度貌似还没啥好办法。 select有一个size属性，就是显示option的项数目，那么我们可以通过这个属性去想想办法，请看下面这段： <select id=tt name=tt onmouseover="this.size=\'4\';" onmouseout="this.size=\'1\';"> <option>北京</option> <option>上海</option> <option>天津</option> <option>重庆</option> &
众所周知，select要设置宽度很简单，但是真要设置它的高度貌似还没啥好办法。
select有一个size属性，就是显示option的项数目，那么我们可以通过这个属性去想想办法，请看下面这段：
<select id=tt name=tt onmouseover="this.size=\'4\';" onmouseout="this.size=\'1\';">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
<option>河北</option>
<option>山西</option>
<option>内蒙古</option>
</select>
好像还不错是吧？哈哈，但一定要记得如果弄不好会出现页面被挤来挤去的现象，所以一定要记得设置好父元素(div、li、td)的高度。 参考技术A 如果你想修改select下拉框的高度等外观的话，是没有办法的，只能通过js来模拟达到，同理，有些单选框和多选框也只能通过js模拟达到修改外观的目的 参考技术B <select style=" width:100px;" size="2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

select 的高度 是由 size控制的。

前端，关于下拉选择

参考技术A

select标签构成的下拉框和jquery通过js构建的下拉框用法一样。例如：

html下拉框：

js控制的下拉框：

两者的本质是相同的，但是，select标签创建的下拉框会默认选中第一个选项。而js控制的下拉框默认是不会选中任何选项的。
当然select标签的默认选项可以通过为option标签添加selected属性设置。
而js控制的下拉框可以通过$("id").combobox(\'setValue\',value);设置初始值。
下拉框的默认值的获取方式：
$("id").next().children(":text").val()或者$("id").combobox("getValue").

遇到的问题是：下拉框默认选中第一个，但是没有触发选中时候的相应事件。

解决方法： onchange从这个名称就可以看出，只有在select的选项有改变（change）的时候才会触发这个事件的。一般情况下select的第一个选项是默认选项，当你选中第一个项时，由于值没有改变，所以是不会触发onchange事件的。解决这个问题并没有什么完美的办法，一般你可以增加一个空值的项作为第一选项，比如<option>请选择</option>，这样原来的第一项就变成了第二项，点击该项值就有所改变了，就会触发onchange事件了；或者把除第一项外的其他项设为默认值，这样点击第一项也会触发事件的。