JavaScript之Select和Option对象

select对象|option对象

length 长度

selectedIndex 获取选中项的索引(下标)

options 返回一个数组（所有的option项）

options[3] 获取指定下标的option对象

obj.options[index].value; 获取选中项options的value

obj.options[index].text; 获取选中项options的text

obj.add(new Option("文本" ,"值" ));

利用Option对象来创建option标签

javascript">var option = new Option("初中","初中");

---

javascript"><select id="degree">
            <option value="0">--请选择学历--</option>
            <option value="gaozhong">高中</option>
            <option value="dazhuan">大专</option>
            <option value="benke">本科</option>
            <option value="yanjiusheng">研究生</option>
            <option value="boshi">博士</option>
        </select>
        <input type="button" value="获取下拉列表信息" id="btnGet">
        <input type="button" value="添加选项" id="btnAdd">
        <input type="button" value="清空下拉列表" id="btnClear">
        <input type="button" value="选中本科" id="btnSelect">
        <!-- js区域 -->
        <script type="text/javascript">
            function $(id) {
                return document.getElementById(id);
            }
            // 获取下拉列表信息
            $("btnGet").onclick = function() {
                // alert(123);
                // 获取select标签下的option标签的个数
                     console.log($("degree").length);
​
                // 获取被选中的option的索引（下标）
                     console.log($("degree").selectedIndex);
​
                // 设置选中的option
                     $("degree").selectedIndex = 3;
​
                // 获取option数组
                     console.log($("degree").options);
                // 获取指定元素对象
                     console.log($("degree").options[2]);
​
                     $("degree").selectedIndex = 3;
                 console.log($("degree").options[$("degree").selectedIndex]);
​
                // 获取value值
                     console.log($("degree").options[2].value);
                // 获取文本内容
                     console.log($("degree").options[2].innerHTML);
                     console.log($("degree").options[2].text);
                // 创建一个option标签  createElement+appchild
                var option=new Option('1','2');
                console.log(typeof(option));
            }
                $('btnSelect').onclick=function(){
                    $('degrss').selectedIndex=i;
                    break;
                }
        }
    }

---

javascript"><h3>3.二级联动[版本2]</h3>
        省:<select id="province" name="province">
            <option selected="selected" value="all">全部</option>
        </select>
        市:
        <select id="city" name="city">
            <option selected="selected" value="all">全部</option>
        </select>
        
        
        <script type="text/javascript">
            // console.log(typeof(citydata));
            for(var pro in citydata){
                $("province").add(new Option(pro,pro))
            }   
            
            var stu = {"name":"张三","sex":"男"};
            
            
            // 设置$("province") 改变事件
            $("province").onchange = function(){
                // 清空第二个下拉框中的所有选项
                $("city").length = 0;
                $("city").add(new Option("请选择","请选择"));
                // 获取所有的省份（遍历）  获取选中的省份
                for(var pro in citydata){
                    if(pro === this.value){
                        // console.log(pro);
                        // console.log(typeof(citydata[pro]));
                        console.log(citydata[pro]);
                        // break;
                        // 遍历得到点击省份的所有城市
                        for(var ct in citydata[pro]){
                            // console.log(citydata[pro][ct]);
                            $("city").add(new Option(citydata[pro][ct],citydata[pro][ct]));
                        }
                    }
                }
            };
        </script>