bootstrap可编辑下拉框jquery.editable-select

2019-11-19 15:11:18

字体：大中小

来源：转载

供稿：网友

下载链接地址：链接: https://pan.baidu.com/s/1pLl0uCj 密码: cd59

然后直接请看代码：

引用：

<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="external nofollow" rel="stylesheet">

HTML部分：

</tr><tr><th valign="middle" ><h4>用量</h4></th><td valign="middle" style="width:28%"><input type="text" class="form_input form-control" id='num' name='num' value='${map.get("input_value")}' placeholder=" "></td><td valign="middle" style="width:27%"><select id="numUnit" name="numUnit" class="form-control"></select></td></tr>

JS部分：

ajaxDirect(contextPath + "/admin/getDataDictAll/024",{},function(data){var htm = "";for ( var int = 0; int < data.length; int++) {htm += "<option value='"+ data[int].name +"'>"+ data[int].name +"</option>";}$('#numUnit').html(htm); $('#numUnit').editableSelect({ effects: 'slide' //设置可编辑 其它可选参数default、fade });$('#numUnit').val(data[0].name); //设置默认值});

url返回的json为：[{"dataDictNo":"024001","gbNo":"","name":"千克","nameInitAbbr":"QK","parentNo":"024"}]

ajaxDirect 是变了个花样的ajax，可无视

/*** 返回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});}

效果如图：