84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
想請問如何做一個可以選擇 但又可以自訂的選擇器呢?
<select name="abc"> <option>自訂</option> <option value="a">A</option> <option value="b">B</option> </select>
選自訂後 可以自己輸入想要的值
但是若又想選擇時,直接再按下拉選
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
寫個大概思路
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; }
提供一个思路吧~
可以自己写一个组件.
红色为组件panel(position:relative;)绿色部分用一个input,点击的时候, 下放蓝色出现options.用ul模拟就行(点击修改input:value为option的text, 同时缓存value).样式可以参照select, 或者整体均自定义一套样式(推荐).
可增加功能, 输入时可过滤options.
布局
<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. 点击 添加按钮 ,向选择框中添加自定义的选择项,并选中添加的选择项
使用 HTML5 的 datalist 可以更简单。
HTML5
<input type="text" list="data"> <datalist id="data"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </datalist>
寫個大概思路
html
js
提供一个思路吧~
可以自己写一个组件.
红色为组件panel(position:relative;)
绿色部分用一个input,
点击的时候, 下放蓝色出现options.用ul模拟就行(点击修改input:value为option的text, 同时缓存value).
样式可以参照select, 或者整体均自定义一套样式(推荐).
可增加功能, 输入时可过滤options.
布局
结果
交互代码就要你自己写了,这边提供下思路
使用
HTML5
的 datalist 可以更简单。