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});}

效果如圖：