参考博文https://blog.csdn.net/CommandBaby/article/details/80622931
只是在动态添加value 和text的时候有变动,对应新的插件,楼主写的$(this).val(t.Id);对li标签添加不了value,我查看了一下源码,使用的以下方法可行:
$(this).attr('value', t.Id)
附上整个配置过程:
- 引用js 和css文件
<script src="~/Content/js/jquery-editable/jquery-editable-select.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/css/jquery-editable-select.css" />
- div里设置select控件
<div style="padding-bottom: 20px">
<select id="select_test" class="form-control">
<option value="0">请选择</option>
</select>
</div>
- js中初始化插件
<script type="text/javascript">
var selectType = "";
function init() {
$('#select_test')
.editableSelect()
.on('select.editable-select', function (e, li) {
selectType = li.attr('value');
});
$.ajax({
url: "url",
type: "GET",
data: {},
dataType: "json",
success: function (data) {
$.each(data, function (i, t) {
$('#select_test').editableSelect('add', function () {
$(this).attr('value', t.Id);
$(this).text(t.Text);
});
});
}
});
}
}
(function ($) {
$(function () {
init();
});
})(jQuery);
</script>
'select.editable-select'是插件提供的事件,在下拉选项被选中时会触发,这个时候可以获取到我们设置的id值,方便之后数据的查阅,等等!
留作记录,方便遇到问题的小伙伴!
如有错误,欢迎指正!
插件地址:https://github.com/indrimuska/jquery-editable-select