浅谈原生javascript的select操作

最新推荐文章于 2024-05-15 15:39:09 发布

xyphf_和派孔明

最新推荐文章于 2024-05-15 15:39:09 发布

阅读量5.2k

点赞数

分类专栏： DOM&BOM操作数据处理文章标签： javascript select DOM操作

本文链接：https://blog.csdn.net/xyphf/article/details/52032495

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

数据处理

56 篇文章 1 订阅

订阅专栏

DEMO1

<script>
window.onload=function(){
    var oSel=document.getElementById('sel');
    //alert(oSel.value);    //当前选中的option的value 

    var aOption=oSel.getElementsByTagName('option');
    for(var i=0;i<aOption.length;i++){
        if(aOption[i].selected==true){
            alert(aOption[i].innerHTML);    
        }
    }   
};
</script>
<select id="sel">
    <option value="sh">上海</option>
    <option value="bj">北京</option>
</select>

DEMO2

<script>
window.onload=function(){
    var oSel=document.getElementById('sel');
    //alert(oSel.value);    //当前选中的option的value 
    var aOption=oSel.options

    //oSel.options  //  所有select下面的option

    //alert(oSel.selectedIndex) //选中的option的下标

    //alert(oSel.options[oSel.selectedIndex].innerHTML);
    alert(oSel.options[oSel.selectedIndex].text);
};
</script>
<select id="sel">
    <option value="sh">上海</option>
    <option value="bj" >北京</option>
    <option value="wh" selected>武汉</option>
</select>

DEMO3

<script>
window.onload=function(){
    var oSel=document.getElementById('sel');
    oSel.onchange=function(){
        //alert('ok');  
        //alert(oSel.value);    选择改变时，取value

        //选择改变时取text
        alert(oSel.options[oSel.selectedIndex].text);
    };
};
</script>
<select id="sel">
    <option value="sh">上海</option>
    <option value="bj" >北京</option>
    <option value="wh" selected>武汉</option>
</select>

DEMO4

<script>
window.onload=function(){
    var oSel=document.getElementById('sel');
    var oT1=document.getElementById('t1');
    var oT2=document.getElementById('t2');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function(){
        var oPt=new Option(oT2.value,oT1.value);//创建一个option
        oSel.options.add(oPt);  //添加
    };  
};
</script>
<body>
    <input type="text" id="t1" value="value">
    <input type="text" id="t2" value="text">
    <input type="button" value="添加" id="btn1">
    <select id="sel"></select>
</body>

DEMO5

<script>
window.onload=function(){
    var oSel=document.getElementById('sel');
    var oT1=document.getElementById('t1');
    var oT2=document.getElementById('t2');
    var oBtn=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');

    //添加
    oBtn.onclick=function(){
        var oPt=new Option(oT2.value,oT1.value);
        oSel.options.add(oPt);  
    };

    //删除
    oBtn2.onclick=function(){
        //select对象.options.remove(下标);
        oSel.options.remove(oSel.selectedIndex);    
    };

};
</script>
<body>
    <input type="text" id="t1" value="value">
    <input type="text" id="t2" value="text">
    <input type="button" value="添加" id="btn1">
        <select id="sel"></select>
    <input type="button" value="删除" id="btn2">
</body>

DEMO6

<script>
window.onload=function(){
    var oSel=document.getElementById('sel');
    var oT1=document.getElementById('t1');
    var oT2=document.getElementById('t2');
    var oBtn=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');

    viewSel();

    //添加
    oBtn.onclick=function(){
        var oPt=new Option(oT2.value,oT1.value);
        oSel.options.add(oPt);
        viewSel();  
    };

    //删除
    oBtn2.onclick=function(){
        //select对象.options.remove(下标);
        oSel.options.remove(oSel.selectedIndex);
        viewSel();  
    };

    function viewSel(){
        if(oSel.options.length==0){
            oSel.style.display='none';  
        }else{
            oSel.style.display='inline-block';      
        }   
    }
};
</script>
<body>
    <input type="text" id="t1" value="value">
    <input type="text" id="t2" value="text">
    <input type="button" value="添加" id="btn1">
        <select id="sel"></select>
    <input type="button" value="删除" id="btn2">
</body>

DEMO7

<script>
window.onload=function(){
    var oSel=document.getElementById('sel');
    var oT1=document.getElementById('t1');
    var oT2=document.getElementById('t2');
    var oBtn=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');

    viewSel();
    //添加
    oBtn.onclick=function(){
            find=false;

            for(var j=0;j<oSel.options.length;j++){
                if(oSel.options[j].value==oT1.value){
                    find=true;
                    break;      
                }   
            }

            if(!find){//禁止添加重复
                var oPt=new Option(oT2.value,oT1.value);
                oSel.options.add(oPt);
                viewSel();
            }           
    };

    //删除
    oBtn2.onclick=function(){
        //select对象.options.remove(下标);
        oSel.options.remove(oSel.selectedIndex);
        viewSel();  
    };

    function viewSel(){
        if(oSel.options.length==0){
            oSel.style.display='none';  
        }else{
            oSel.style.display='inline-block';      
        }   
    }
};
</script>
<body>
    <input type="text" id="t1" value="value">
    <input type="text" id="t2" value="text">
    <input type="button" value="添加" id="btn1">
    <select id="sel"></select>
    <input type="button" value="删除" id="btn2">
</body>