上一篇: iframe学习下一篇: script标签

select标签详解-关于下拉菜单的设置和取值

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>
 $('#js_fund_fit_dialog_priority').val()
或者 $('#js_fund_fit_dialog_priority').find('option:selected').val()
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
 })   //原因和失焦设置一样
//change事件
$('#js_fund_fit_dialog_priority').on('change', function () {
    ...//操作逻辑
})

4.关于option元素

属性 描述
disabled disabled 规定此选项应在首次加载时被禁用
label text 定义当使用时所使用的标注
selected selected 规定选项(在首次显示列表中时)表现选中状态
value text 定义送往服务器的选项值

如果选项太多,可以用optgroup包裹,并分类

<select size="6">
    <optgroup label="a">
        <option>Volvo</option>
        <option>Saab</option>
        <option>Mercedes</option>
        <option>Audi</option>
    </optgroup>
    <optgroup label="b">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </optgroup>
</select>

如果option选项都没有添加selected,那么会默认第一个option的值被选中,如果有多个option选项设置selected,那么最后一个option的selected有效.

如果option选项都没有添加selected,那么会默认第一个option的值被选中,如果有多个option选项设置selected,那么最后一个option的selected有效

上一篇: iframe学习下一篇: script标签