业务需要，需要一个选择国家的下拉框，国家比较多，要实现可编辑，可过滤，可搜索功能。
网上搜索发现有一个插件可以基本实现我的功能，但不完美，所以又进行了一番改造；
原插件下载地址：
https://github.com/indrimuska/jquery-editable-select
效果图：
话不多说，上代码：
<html>
<head>
<title>可编辑下拉框</title>
<link rel="stylesheet" href="jquery-editable-select.css">
<script type="text/javascript" src="Jquery3.3.1.js"></script>
<script type="text/javascript" src="jquery-editable-select.js"></script>
<style type="text/css">
label, .editSelect {
width: 150px;
padding: 7px 10px;
display: inline-block;
margin: 5px 0;
}
.editSelect {
width: 200px;
border: 1px solid rgba(221, 221, 220, 1);
}
</style>
</head>
<body>
<div>
<label>普通下拉框</label><select class="editSelect">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
</div>
<div>
<label>可编辑下拉框</label><select class="editSelect" id="editSelect1">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
<span>根据输入框内容进行搜索,并定位到第一个符合的值</span>
</div>
<div>
<label>可编辑下拉框</label><select class="editSelect" id="editSelect2">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
<span>允许用户输入列表之外的值</span>
</div>
<div>
<label>可编辑下拉框</label><select class="editSelect" id="editSelect3">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
<span>若输入的值不在列表中 会被清空</span>
</div>
<div>
<label>可编辑下拉框</label><select class="editSelect" id="editSelect4">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
<span>根据输入值进行过滤,不符合的值隐藏</span>
</div>
<div>
<label>可编辑下拉框</label><select class="editSelect" id="editSelect5">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
<span>值改变触发回调函数</span>
</div>
<div>
<label>可编辑下拉框</label><select class="editSelect" id="editSelect6">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
<br>
<span>其它可配置的参数 </span>
<br>
<span>
effects:显示隐藏下拉列表的动画 "default", "slide", "fade"
</span>
<br>
<span>
duration:显示隐藏下拉列表的时间 "slow", "fast", 还可填数字 单位是毫秒
</span>
<br>
<span>
appendTo:Where to append the dropdown list in the DOM. String or jQuery element
</span>
</div>
<div>
<label>可编辑下拉框</label><select class="editSelect" id="editSelect7">
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="America">America</option>
<option value="France">France</option>
<option value="Korea">Korea</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="North Korea">North Korea</option>
<option value="England">England</option>
<option value="Germany">Germany</option>
</select>
<br>
<span>
其它方法
</span>
<input type="button" id="button1" value="添加option value=Italy">
<input type="button" id="button2" value="删除一个option">
<input type="button" id="button3" value="清除所有option">
<input type="button" id="button4" value="隐藏下拉框">
<input type="button" id="button5" value="显示下拉框">
<input type="button" id="button6" value="销毁下拉框">
<input type="button" id="button7" value="清空选择的值">
<input type="button" id="button8" value="获取选择的value值">
<input type="button" id="button9" value="获取选择的text值">
<input type="button" id="button10" value="选择value等于特定值的值">
</div>
</body>
</body>
</html>
<script type="text/javascript">
$(function () {
//根据输入框内容进行搜索,并定位到第一个符合的值
$("#editSelect1").editableSelect();
//允许用户输入列表之外的值
$("#editSelect2").editableSelect({userDefined: true});
//若输入的值不在列表中 会被清空
$("#editSelect3").editableSelect({userDefined: false});
//根据输入值进行过滤,不符合的值隐藏
$("#editSelect4").editableSelect({filter: true});
//值改变触发回调函数
$("#editSelect5").editableSelect().on('ocsselect.editable-select', function (e, li) {
console.log(e);
console.log(li);
alert(li.text())
});
//其它可配置的参数
// effects:显示隐藏下拉列表的动画 "default", "slide", "fade"
//duration:显示隐藏下拉列表的时间 "slow", "fast", 还可填数字 单位是毫秒
// appendTo:Where to append the dropdown list in the DOM. String or jQuery element
$("#editSelect6").editableSelect({
effects: 'fade',
duration: 500,
appendTo: 'body'
});
$("#editSelect7").editableSelect();
//添加option value=Italy
$("#button1").on("click",function () {
//新增一个option到下拉框
//插入内容
var text = "Italy"
//插入位置
var index = 10;
$("#editSelect7").editableSelect("add", text, index, [{ name: 'value', value: text }]);
})
//删除一个option
$("#button2").on("click",function () {
//删除位置为1的option
$("#editSelect7").editableSelect('remove', 1);
})
//清除所有option
$("#button3").on("click",function () {
$("#editSelect7").editableSelect('clear');
})
//隐藏下拉框
$("#button4").on("click",function () {
$("#editSelect7").editableSelect('hide');
})
//显示下拉框
$("#button5").on("click",function () {
$("#editSelect7").editableSelect('show');
})
//销毁下拉框
$("#button6").on("click",function () {
$("#editSelect7").editableSelect('destroy');
})
//清空选择的值
$("#button7").on("click",function () {
$("#editSelect7").editableSelect('reset');
})
//获取选择的value值
$("#button8").on("click",function () {
alert($('#editSelect7').attr("data-val"))
})
//获取选择的text值
$("#button9").on("click",function () {
alert($('#editSelect7').val())
})
//选择value等于特定值的值
$("#button10").on("click",function () {
$('#editSelect7').editableSelect('selectvalue', "Italy");
})
})
</script>
用法都在代码里了 ；注释写的很清楚。
资源下载地址： https://download.csdn.net/download/aqqyhuhjjjhjk/12420250
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
