1.定义
select 元素可创建单选或多选菜单。
<select> 元素中的 <option>标签用于定义列表中的可用选项。
2.属性
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
| disabled | disabled | 规定禁用该下拉列表 |
| form | form_id | 规定文本区域所属的一个或多个表单 |
| multiple | multiple | 规定可选择多个选项 |
| name | name | 规定下拉列表的名称 |
| required | required | 规定文本区域是必填的 |
| size | number | 规定下拉列表可见选项的数目 |
3.事件与用法
onchange内容改变事件,当select下拉列表选中的内容发生改变时触发;
<select name="" id="js_fund_fit_dialog_priority" class="js_fund_fit_dialog_des" onmousedown="if(this.options.length>5){this.size=6}" onblur="this.size=0" onchange="this.size=0">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
a.如何获得select显示框的值?
$('#js_fund_fit_dialog_priority').val()
或者 $('#js_fund_fit_dialog_priority').find('option:selected').val()
b.如何如果option选项太多,如何控制显示个数?
select元素的size属性用于控制显示的选项个数
$('#js_fund_fit_dialog_priority').on('mousedown', function () {
if (this.options.length > 5) {this.size = 6}
}) //option个数多,限制显示6个,其他的选项滚动能看见
$('#js_fund_fit_dialog_priority').on('blur', function () {
this.size = 0
}) //select选项框失焦后关闭下拉框,因为设置size后,选择完选项不会再自动隐藏下拉框,必须手动设置
$('#js_fund_fit_dialog_priority').on('change', function () {
this.size = 0
}) //原因和失焦设置一样
c.如何在下拉框改变选项时增加操作逻辑?
change事件
$('#js_fund_fit_dialog_priority').on('change', function () {
...//操作逻辑
})
4.关于option元素
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 规定此选项应在首次加载时被禁用 |
| label | text | 定义当使用<optgrounp>时所使用的标注 |
| selected | selected | 规定选项(在首次显示列表中时)表现选中状态 |
| value | text | 定义送往服务器的选项值 |
如果option选项都没有添加selected,那么会默认第一个option的值被选中,如果有多个option选项设置selected,那么最后一个option的selected有效
