<header>用js實(shí)現(xiàn)select操作</header>
<nav>
<button id="createBtn">創(chuàng)建select</button>
<button id="addBtn">添加option</button>
<button id="deleteAllBtn">刪除所有option</button>
<button id="deleteOneBtn">刪除一個(gè)option</button>
<button id="getValue">獲取選項(xiàng)的值</button>
<button id="getText">獲取選項(xiàng)的文本</button>
<button id="changeOption">修改選項(xiàng)</button>
<button id="remove">刪除select</button>
</nav>
<script>
//創(chuàng)建select
? ? function createSelect(){
????????let mySelect =document.createElement('select');
????????mySelect.id ='select';
????????document.body.appendChild(mySelect);
????}
//動(dòng)態(tài)添加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;
????}
//刪除一個(gè)option
? ? function deleteOne() {
????????let obj =document.getElementById('select');
????????console.log(obj);
????????console.log(obj.selectedIndex);
????????obj.options.remove(obj.selectedIndex);
????}
//獲取選項(xiàng)的值
? ? function getValue(){
????????let obj =document.getElementById('select');
????????let value;
????????value =obj.options[obj.selectedIndex].value;
????????console.log(`value的值是：${value}`)
????}
//獲取選項(xiàng)的文本
? ? function getText(){
????????let obj =document.getElementById('select');
????????let text;
????????text =obj.options[obj.selectedIndex].text;
????????console.log(`text的值是：${text}`)
????}
//修改選項(xiàng)
? ? 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>
