项目需求:需要对选择下拉组件进行改造,可以对选项进行编辑操作。
参考资料:jquery-editable-select Github资料
从网上查到一个jquery-editable-select 组件进行增强下。
各种百度,资料很少。
简单贴出使用过程:
1、引入css、js 文件
在项目引入的代码:我放在项目的位置上了
<link rel="stylesheet" type="text/css" href="<%=basePath %>/res/assets/jquery-editable-select/css/jquery-editable-select.css"/>
<script type="text/javascript" src="<%=basePath%>/res/assets/jquery-editable-select/js/jquery-editable-select.js"></script>
2、对组件增强
// 组件增强编辑功能
$("#" + updateSpu.spuAttributeValues[i].attributeId).editableSelect({
effects: 'default',
}).on('select.editable-select', function (e, li) {
li.parent().parent().find('.es-input').attr('attrid',li.attr('value'))
})
$("#" + updateSpu.spuAttributeValues[i].attributeId).val(updateSpu.spuAttributeValues[i].attributeValue);