使用editableSelect实现可编辑选项框

最新推荐文章于 2024-08-08 07:50:42 发布

a954735254

最新推荐文章于 2024-08-08 07:50:42 发布

阅读量7.4k

点赞数 1

本文链接：https://blog.csdn.net/a954735254/article/details/85616216

版权

效果如下，输入什么，只显示包含什么的选项

什么都没输入

输入0

这里的001002等数据是从后台获取的设备实体的设备序列号字段，

下面是代码的HTML部分代码

<select id="numUnit" name="numUnit"  class="form-control" 
    v-model="rMerchantDevice.deviceNum" autocomplete="off">
</select>

JS部分代码，需要导入以下资源，可以资源去https://www.cnblogs.com/hhg-2015/p/7654582.html这篇文章去找

<script type="text/javascript" src="${ contextPath }/res/sys/scripts/jquery.editable-select.min.js"></script>
<link href="${ contextPath }/res/sys/scripts/css/jquery.editable-select.min.css" rel="stylesheet">

JS部分代码

/**
 * 返回JSON形式的数据
 * @param url 地址
 * @param data 参数
 * @param func 返回函数
 * @param async 是否异步
 */
function ajaxDirect(url, data, func, async) {
    if (!async) {
        async = false;
    }
    $.ajax({
        url: url,
        type: "post",
        dataType: "json",
        async: async,
        data: data,
        success: func,
    });
}
ajaxDirect(baseURL+ "/business/tdevice/findFullDevice", {},
    function(data) {
        var htm = "";
        for (var int = 0; int < data.tDeviceEntities.length; int++) {
            var a=data.tDeviceEntities;
            htm += "<option value='" + a[int].deviceNum + "'>" + a[int].deviceNum + "</option>";
        }
        $('#numUnit').html(htm);
        $('#numUnit').editableSelect({
            effects: 'slide',
            //可选参数default、fade
            filter: true //false 不过滤，否则选中后其它选项消失
        });

        // $("#numUnit").attr("readonly","true"); // 设置不可编辑
        // setTimeout(function() {
        //         $('#numUnit').val(data[0].name); // 设置默认值，不延时则不生效。
        //     },
        //     300);
    });

以上可以实现从后台将数据传到选择下的选项中，并且实现输入过滤的功能，但是实现添加功能时获取不到V型= “rMerchantDevice.deviceNum” 里的值，原因应该是和可编辑选择插件有关，解决办法如下

点击确定添加设备实体时先在JS中给 “rMerchantDevice.deviceNum” 赋值即可，如下

saveOrUpdate: function (event) {
	var url = vm.isAdd ? "business/rmerchantdevice/save" : 
                         "business/rmerchantdevice/update";
	vm.rMerchantDevice.deviceNum=document.getElementById('numUnit').value;
         //重点是这一句，添加了这一句就给vm.rMerchantDevice.deviceNum赋值了。
			$.ajax({
				type: "POST",
			    url: baseURL + url,
                contentType: "application/json",
			    data: JSON.stringify(vm.rMerchantDevice),
			    success: function(r){
			    	if(r.code === 0){
						alert('操作成功', function(index){
							vm.reload();
						});
					}else{
						alert(r.msg);
					}
				}
			});
		},