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

1.定义
select 元素可创建单选或多选菜单。
<select> 元素中的 <option>标签用于定义列表中的可用选项。
2.属性

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元素

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