|
业务需要，需要一个选择国家的下拉框，国家比较多，要实现可编辑，可过滤，可搜索功能。 网上搜索发现有一个插件可以基本实现我的功能，但不完美，所以又进行了一番改造； 原插件下载地址：
https://github.com/indrimuska/jquery-editable-select
效果图：  话不多说，上代码：
可编辑下拉框
label, .editSelect {
width: 150px;
padding: 7px 10px;
display: inline-block;
margin: 5px 0;
}
.editSelect {
width: 200px;
border: 1px solid rgba(221, 221, 220, 1);
}
普通下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
可编辑下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
根据输入框内容进行搜索,并定位到第一个符合的值
可编辑下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
允许用户输入列表之外的值
可编辑下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
若输入的值不在列表中 会被清空
可编辑下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
根据输入值进行过滤,不符合的值隐藏
可编辑下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
值改变触发回调函数
可编辑下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
其它可配置的参数
effects:显示隐藏下拉列表的动画 "default", "slide", "fade"
duration:显示隐藏下拉列表的时间 "slow", "fast", 还可填数字 单位是毫秒
appendTo:Where to append the dropdown list in the DOM. String or jQuery element
可编辑下拉框
China
Japan
America
France
Korea
India
Russia
North Korea
England
Germany
其它方法
$(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");
})
})
用法都在代码里了 ；注释写的很清楚。
资源下载地址： https://download.csdn.net/download/aqqyhuhjjjhjk/12420250
|