关于select的各种操作

<header>用js实现select操作</header>

<nav>

<button id="createBtn">创建select</button>

<button id="addBtn">添加option</button>

<button id="deleteAllBtn">删除所有option</button>

<button id="deleteOneBtn">删除一个option</button>

<button id="getValue">获取选项的值</button>

<button id="getText">获取选项的文本</button>

<button id="changeOption">修改选项</button>

<button id="remove">删除select</button>

</nav>

<script>

//创建select

    function createSelect(){

        let mySelect =document.createElement('select');

        mySelect.id ='select';

        document.body.appendChild(mySelect);

    }

//动态添加option

    function addOption(){

        let obj =document.getElementById('select');

        obj.add(new Option('name','value'));//方法一

        obj.options.add(new Option('name1','value1'));//方法二

        for(let i  =0 ;i <10;i ++){

            obj.options[i] =new Option('name'+i,'value'+i)//方法三

        }

    }

//删除所有option

    function deleteAll(){

        document.getElementById('select').options.length =0;

    }

//删除一个option

    function deleteOne() {

        let obj =document.getElementById('select');

        console.log(obj);

        console.log(obj.selectedIndex);

        obj.options.remove(obj.selectedIndex);

    }

//获取选项的值

    function getValue(){

        let obj =document.getElementById('select');

        let value;

        value =obj.options[obj.selectedIndex].value;

        console.log(`value的值是：${value}`)

    }

//获取选项的文本

    function getText(){

        let obj =document.getElementById('select');

        let text;

        text =obj.options[obj.selectedIndex].text;

        console.log(`text的值是：${text}`)

    }

//修改选项

    function changeOption(){

        let obj =document.getElementById('select');

        let option =obj.options[obj.selectedIndex] =new Option('新文本','新值');

        console.log(option);

    }

//删除select

    function remove(){

        let obj =document.getElementById('select');

        obj.parentNode.removeChild(obj);

    }

document.getElementById('createBtn').addEventListener('click',createSelect);

document.getElementById('addBtn').addEventListener('click',addOption);

document.getElementById('deleteAllBtn').addEventListener('click',deleteAll);

document.getElementById('deleteOneBtn').addEventListener('click',deleteOne);

document.getElementById('getValue').addEventListener('click',getValue);

document.getElementById('getText').addEventListener('click',getText);

document.getElementById('changeOption').addEventListener('click',changeOption);

document.getElementById('remove').addEventListener('click',remove);

</script>