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

Question

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

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

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

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

Answer 1

寫個大概思路

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;
}

Answer 2

提供一个思路吧~

可以自己写一个组件.

红色为组件panel(position:relative;)
绿色部分用一个input,
点击的时候, 下放蓝色出现options.用ul模拟就行(点击修改input:value为option的text, 同时缓存value).
样式可以参照select, 或者整体均自定义一套样式(推荐).

可增加功能, 输入时可过滤options.

Answer 3

布局

<style>
.select {
  min-width:80px;
}

.select , .diy_inp , .btn {
  height:30px;
}

.btn {
  display:inline-block;
  zoom:1;
  min-width:80px;
}
</style>

<select name='abc' class='select'>
    <option>请选择...</option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<input type='text' placeholder='自定义选项' id='diy' class='diy_inp' />
<button id='add_diy_select' class='btn'>添加</button>

结果

交互代码就要你自己写了，这边提供下思路

1. 默认：请选择...
2. 点击选择框，可以选择预定义的选择项
3. 点击 添加按钮 ，向选择框中添加自定义的选择项，并选中添加的选择项

Answer 4

使用 HTML5 的 datalist 可以更简单。

<input type="text" list="data">
<datalist id="data">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</datalist>