js知识整理(九)---js操作下拉框

1.原结点

 家乡<select id="city" onchange="changeText(this)">
         <option value="桂林">桂林</option>
         <option value="黄山">黄山</option>
         <option value="惠州">惠州</option>
         <option value="徐州">徐州</option>
    </select>

2.下拉框属性介绍

select:定义下拉框
**option:**拉选项
value 属性,获取选中的值
selectedIndex:当前选中的option的索引
options 属性:获取所有的 选项集合
option 的属性:value -----选中的值, text------ 页面显示的数据
onchange 事件:如果select 发生了改变 会执行 触发change事件执行 指定的函数 ]
this 是当前 触发的select 节点对象

3.获取/设置下拉框的值和索引

 function getSelectNode(){
           var selectNode = document.getElementById('city');

           console.log(selectNode.value);//拿到下拉框选中的值
            console.log(selectNode.selectedIndex);//拿到选中值的索引
            selectNode.selectedIndex = 3;//设置默认值
 }

4.拿到某个 option,并修改里面的属性

 var opt = selectNode.options[1];
 opt.text = '华山';//修改文本显示值
 opt.value ='华山';//修改提交值

5.添加一个option

步骤:
(1)拿到select 节点
(2)创建一个option节点
(3)设置 option节点 属性
(4)把opt 添加到 select 节点中
selectNode 中有add方法可以直接添加 opt 节点

     function addMyOption(){
            // 1. 拿到select 节点 
            var selectNode = document.getElementById('city');
            // 2. 创建一个option节点 
            var opt = document.createElement('option');
            // 3 设置 option节点 属性 
            opt.value = '泰山';
            opt.text = '泰山';

            // 4 把opt 添加到 select 节点中 
            // selectNode 中有add方法可以直接添加 opt 节点 
            selectNode.add(opt);
        }