Andy 胡

导航

JS操作select

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <script>
        function 创建Select() {
            var _select = document.createElement("select");
            _select.id = "mySelect";
            document.body.appendChild(_select);
        }

        function addOption() {
            //根据id查找对象, 
            var _select = document.getElementById('mySelect');
            //添加一个选项 
            _select.add(new Option("文本", "")); //这个只能在IE中有效 
            
            //这个兼容IE与firefox 
            _select.options.add(new Option("北京", "BK"));
            _select.options.add(new Option("上海", "SH"));
            _select.options.add(new Option("武汉", "大武汉"));
        }
        
        function getOption(){
            var _select=document.getElementById('mySelect'); 
            
            //序号,取当前选中选项的序号 
            var index=_select.selectedIndex; 
            var val = _select.options[index].text; 
            alert(val)
        }
        
        function 修改Option(){
            var _select=document.getElementById('mySelect'); 
            var index=_select.selectedIndex; 
            var val = _select.options[index]=new Option("新文本","新值"); 
        }
    </script>

    <body>
        <input type="button" value="创建Select" onclick="创建Select()" />
        <br>
        <input type="button" value="添加选项" onclick="addOption()" />
        <br>
        <input type="button" value="getOption" onclick="getOption()" />
        <br>
        <input type="button" value="修改" onclick="修改Option()" />
        <br>
    </body>

</html>

posted on 2017-02-07 09:37  talkwah  阅读(211)  评论(0编辑  收藏  举报