javascript - 可以選擇和輸入的選擇器？

问题描述

问 题

想請問如何做一個可以選擇 但又可以自訂的選擇器呢？

<select name="abc">
<option>自訂</option>
<option value="a">A</option>
<option value="b">B</option>
</select>

選自訂後 可以自己輸入想要的值

但是若又想選擇時，直接再按下拉選

解决方案

寫個大概思路

html

<select name="abc" id='sel'>
    <option value="" id="nth1">自訂</option>
    <option value="a">A</option>
    <option value="b">B</option>
</select>    
<input type="text" id="make"  style="display:block"/>

js

var elMake = document.getElementById("make");
var elNth1 = document.getElementById("nth1");
var elSel = document.getElementById("sel");

//select值改變事件
elSel.onchange = function(){
    //所選option是第一個(自定義)，input顯示
    if(se.selectedIndex==0){
        elMake.style.display = 'block';
    //否則不顯示
    }else{
        elMake.style.display = 'none';
    }
}

//將input輸入的值同步到自訂option的value
elMake.onkeyup = function(){
    elNth1.value = elMake.value;
}

这篇关于javascript - 可以選擇和輸入的選擇器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！