浅谈原生javascript的select操作

原创

xyphf_和派孔明 2022-07-22 09:42:08 ©著作权

文章标签 javascript select DOM操作 html i++ 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者xyphf_和派孔明的原创作品，请联系作者获取转载授权，否则将追究法律责任

DEMO1

<script>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>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);</script>
<select id="sel">
    <option value="sh">上海</option>
    <option value="bj"北京</option>
    <option value="wh" selected>武汉</option>
</select>

DEMO3

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

        //选择改变时取text</script>
<select id="sel">
    <option value="sh">上海</option>
    <option value="bj"北京</option>
    <option value="wh" selected>武汉</option>
</select>

DEMO4

<script>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>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(下标);</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>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>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>