Home > Web Front-end > JS Tutorial > body text

How to write bootstrap editable drop-down box jquery.editable-select

一个新手
Release: 2017-10-13 09:23:14
Original
2933 people have browsed it

Please see the code directly:

Quote:

<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">
Copy after login

HTML part:


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

JS part:


ajaxDirect(contextPath + "/admin/getDataDictAll/024", {},
function(data) {
	var htm = "";
	for (var int = 0; int < data.length; int++) {
		htm += "<option value=&#39;" + data[int].name + "&#39;>" + data[int].name + "</option>";
	}
	$(&#39;#numUnit&#39;).html(htm);
	$(&#39;#numUnit&#39;).editableSelect({
		effects: &#39;slide&#39;,
		//可选参数default、fade 
		filter: false // 不过滤,否则选中后其它选项消失
	});

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

ajaxDirect is ajax with a different twist, you can ignore it


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

The effect is as shown:

Other option settings:

  • filter: Filtering, that is, when inputting content, the drop-down option will match the entered characters. Supports Chinese, true/false, and defaults to true.

  • effects: Animation effect. When the drop-down selection box is triggered, the drop-down box displays the transition effect. There are three values: default, slide, and fade. The default is default.

  • duration: The transition animation speed displayed in the drop-down option box, including fast, slow, and number (milliseconds), the default is fast.

  • Event

  • onCreate: Fired when input is entered.

  • onShow: Triggered when pulled down.

  • onHide: Triggered when the drop-down box is hidden.

  • onSelect: Fired when the option in the drop-down box is selected.

The above is the detailed content of How to write bootstrap editable drop-down box jquery.editable-select. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!