4.DOM访问列表下拉菜单元素 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM访问列表下拉菜单元素</title>
    <script type="text/javascript">
        function showSelectInfo(){
            //列出所有被选中项的text
            var select = document.getElementById("city");
            //获取到单项的数组
            var optArray = select.options;
            //遍历数组
            var s="被选中的所有项文本是：\n";
            for(var i=0; i<optArray.length; i++){
                if(optArray[i].selected){
                    s+=optArray[i].text+"\n";
                }
            }
            alert(s);
            //设置全部都不选择
            //有待研究  不是很明白
            for (var i=0;i<optArray.length;i++){
                optArray[i].selected=false;
            }
        }
    </script>
</head>
<body>
<select id="city" name="city" size="4" multiple>
    <option value="beijing">北京</option>
    <option value="shanghai" selected="selected">上海</option>
    <option value="tianjin">天津</option>
    <option value="nanjing">南京</option>
    <option value="shenzhen">深圳</option>
    <option value="wuhan">武汉</option>
</select><br/>
<input type="button" value="获取列表框相关信息" onclick="showSelectInfo()">
</body>
</html

　　

posted @ 2017-02-17 18:50  john。  阅读(264)  评论(0)    收藏  举报