14.3 选择框表单

Posted 2021-01-17 jokes

<select>元素的属性

1、add(newOption,relOption) 向控件中插入新的<option>元素，其位置在相关项（relOption）之前

        var oSel = document.getElementById(‘selLocation‘);
        oPtion = document.createElement(‘option‘);
        oPtion.innerhtml = ‘two‘;
        oSel.add(oPtion,oSel.options[1]);        

2、multiple：布尔值，表示是否允许多项选择，

<select id=‘selLocation‘ multiple="multiple" size=‘2‘>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>

3、options：控件中所有的<option>元素的HTMLCollection

4、remove(index)：移除给定位置的选项

var oSel = document.getElementById(‘selLocation‘);
oSel.remove(0);//删除某一项

5、selectedIndex：基于0的选中项索引，如果没有选中项则值为-1.对于支持多选的控件，只保存选中项中第一项的索引

6、size：选择框中可见的行数；

<select id=‘selLocation‘ multiple="multiple" size=‘2‘>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

7、value属性

如果没有选择为空字符串

如果选一个则为该value

如果选两个，则为第一个

<option>

1、index   当前选项在options中的索引

2、label   当前选项的标签；

3、selected： 布尔值 被选中返回true 

4、text ： 选项的文本

5、value：选项的值

var text = oSel.options[0].text;
var value = oSel.options[0].value;

选择框的change事件与其他的表单字段的change事件触发是不一样，其他表单的change事件是在值被修改并且focus焦点离开表单时触发；

而选择框则是选中了就触发