美文网首页
002.JavaScript操作select控件

002.JavaScript操作select控件

作者: 胖先森 | 来源:发表于2017-04-19 14:18 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Select控件测试</title>
    </head>
    <body>
        <select id="mySel">
    
        </select>
        <input type="text" id="id" placeholder="请输入要移除的ID号码">
        <hr/>
        <button id="btn1" type="button" >初始化数据</button>
    
        <button id="btn2" type="button" >测试移除操作</button>
    
        <button id="btn3" type="button" >测试移除选中的项目</button>
    
        <button id="btn4" type="button" >修改选中项目的显示名称</button>
    
        <button id="btn5" type="button" >设置1002选择状态</button>
    
        <button id="btn6" type="button" >获取当前项目的文字,属性,索引</button>
    
        <button id="btn7" type="button" >清空列表</button>
        <script type="text/javascript">
            window.onload=function () {
                var objSelect = document.getElementById("mySel");
    
                document.getElementById("btn1").onclick=function () {
                    //获取option的长度
                    var length = objSelect.options.length;
                    if(length==0){
                        alert("没有内容,添加默认内容");
                        //使用innerHTML操作,方式一
                        objSelect.innerHTML="<option value=''>请选择你的部门</option>";
                        //设置按钮为可用
                        this.disabled=false;
                    }else{
                        //设置按钮为不可用
                        this.disabled=true;
    
                        //使用本地对象添加数据,方式二
                        var valItem = new Option("测试部","1001");
                        //添加操作
                        objSelect.options.add(valItem);
    
                        var valItem = new Option("软件部","1002");
                        //添加操作
                        objSelect.options.add(valItem);
    
                        var valItem = new Option("研发部","1003");
                        //添加操作
                        objSelect.options.add(valItem);
                    }
                }
    
                document.getElementById("btn2").onclick=function () {
                    //获取输入的ID号码
                    var id = document.getElementById("id").value;
                    var length = objSelect.options.length;
                    //判断
                    if(length>0){
                        //迭代
                        for(var i = 0 ;i<length;i++){
                            if(objSelect.options[i].value==id){
                                //移除操作,方式一
                                objSelect.options.remove(i);
                                break;//跳出循环
                            }
                        }
    
                    }else{
                        alert("没有项目,空白的!");
                        document.getElementById("btn1").disabled=false;
                    }
                }
    
                document.getElementById("btn3").onclick=function () {
                    var length = objSelect.options.length;
                    for(var i = 0 ;i<length;i++){
                        if(objSelect.options[i].selected){
                            //移除操作,方式二
                            objSelect.options[i]=null;
                            break;//跳出循环
                        }
                    }
                }
    
                document.getElementById("btn4").onclick=function () {
                    //设置两个简单变量,不弄复杂化的操作了
                    var oValue = 1001;
                    //修改内容
                    var modText = "修改为胖先森";
                    var modValue = 101;
                    var length = objSelect.options.length;
                    for(var i = 0 ;i<length;i++){
                        if(objSelect.options[i].value==oValue){
    
                            objSelect.options[i].text=modText;
                            objSelect.options[i].value=modValue;
                            break;//跳出循环
                        }
                    }
    
                }
    
                document.getElementById("btn5").onclick=function () {
                    //方式一:推荐方式
                    objSelect.value=1002;
                    //方式二
                    /*var length = objSelect.options.length;
                    for(var i = 0 ;i<length;i++){
                        if(objSelect.options[i].value==1002){
    
                            objSelect.options[i].selected=true;
                            break;//跳出循环
                        }
                    }*/
                }
    
                document.getElementById("btn6").onclick=function () {
                    alert("当前的索引:"+objSelect.selectedIndex);
                    alert("当前的文字:"+objSelect.options[objSelect.selectedIndex].text);
                    alert("当前值,方式一:"+objSelect.options[objSelect.selectedIndex].value);
                    alert("当前值,推荐方式二:"+objSelect.value);
    
                }
    
                document.getElementById("btn7").onclick=function () {
                   //不使用DOM操作,清空
                    objSelect.options.length=0;
                    document.getElementById("btn1").disabled=false;
    
                }
            }
    
        </script>
    
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:002.JavaScript操作select控件

          本文链接:https://www.haomeiwen.com/subject/fjthzttx.html