查找列表框、下拉菜单控件

上午学的查找裂表框与昨天学的非常相似
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找列表框、下拉菜单控件</title>

</head>

<body>
<form action="#">
<select name="city" id="city" size="1">
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
    <option value="tianjin">天津</option>
    <option value="nabjing">南京</option>
    <option value="shenzhen">深圳</option>
    <option value="wuhan">武汉</option>
</select><br>
<input type="button" value="第一个城市" onClick="change('0')">
<input type="button" value="上一个城市" onClick="change(s.selectedIndex-1)">
<input type="button" value="下一个城市" onClick="change(s.selectedIndex+1)">
<input type="button" value="最后一个城市" onClick="change(s.length-1)">
</form>
</body>
<script type="text/javascript">
//    var f=document.getElementById("city").form;
//    alert(f.action);
////    获取下拉列表框的select元素对象
//    var s=document.getElementById("city");
//    alert(s.length);
    function    first(){
//        获取select元素
        var s=document.getElementById("city");
//        获取select中的第一个option元素
        var o=s.options[0]
//        获取options中的文本值
        alert(o.text);
    }
    function last(){
//        获取select元素
        var s=document.getElementById("city");
//        获取select选中元素的上一个元素
        var o=s.options[s.selectedIndex-1];
//        获取options中的文本值
        alert(o.text);
    }
        function next(){
//        获取select元素
        var s=document.getElementById("city");
//        获取select选中元素的上一个元素
        var o=s.options[s.selectedIndex+1];
//        获取options中的文本值
        alert(o.text);
    }
            function over(){
//        获取select元素
        var s=document.getElementById("city");
//        获取select选中元素的上一个元素
        var o=s.options[s.length-1];
//        获取options中的文本值
        alert(o.text);
    }        
//                获取select元素
        var s=document.getElementById("city");
        function change(index){
//        获取select选中元素的上一个元素
        var o=s.options[index];　　　　　　　　　　　　　　　　　　能简化就简化
//        获取options中的文本值
        alert(o.text);
    }
    </script>
</html>
查找列表框、下拉菜单控件

猜你喜欢
