Js control select component

最新推荐文章于 2024-10-01 11:14:06 发布

clitonmr

最新推荐文章于 2024-10-01 11:14:06 发布

阅读量563

点赞数

分类专栏： javascript 文章标签： html

本文链接：https://blog.csdn.net/clitonmr/article/details/3541875

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html]
<select id="mysel" name="mysel">
  <option value="1">1 xxxxxxxxxx</option>
  <option value="2">2 yyyyyyyyyy</option>
  <option value="3">3 zzzzzzzzzz</option>
  <option value="4">4 wwwwwwwwww</option>
</select>
<button οnclick="setSel(3)">设置第３项为选中项</button>
<button οnclick="clearSel()">清空选择框</button>
<button οnclick="fillSel()">填充选择框</button>
<button οnclick="removeSel()">移除第一项</button>
<button οnclick="editSel()">修改第一项</button>

<script type="text/javascript">
    function setSel(str){
        with(document.all){
            for(var i=0;i<mysel.options.length;i++){
                if (mysel.options[i].value==str){
                    mysel.selectedIndex=i;
                    break;
                }
            }
        }
    }

    function clearSel(){
        with(document.all){
            mysel.options.length=0;
        }
    }

    function fillSel(){
        with(document.all){
            mysel.options.length=0;
            mysel.options[0] = new Option("1 xxxxxxxxxx","1");
            mysel.options[1] = new Option("2 yyyyyyyyyy","2");
            mysel.options[2] = new Option("3 zzzzzzzzzz","3");
            mysel.options[3] = new Option("4 wwwwwwwwww","4");
            mysel.options[4] = new Option("5 aaaaaaaaaa","5");

            mysel.selectedIndex = 4;
        }
    }

    function removeSel(){
        with(document.all){
            mysel.remove(0);
            if (mysel.options.length>0){
                mysel.selectedIndex=0;
            }
        }
    }

    function editSel(){
        with(document.all){
            if (mysel.options.length>0){
                mysel.options[0] = new Option("这是新的第一项","new Value")
                mysel.selectedIndex=0;
            }
        }
    }
</script>

[/html]