Heim > Web-Frontend > js-Tutorial > Hauptteil

So schreiben Sie das bearbeitbare Bootstrap-Dropdown-Feld jquery.editable-select

一个新手
Freigeben: 2017-10-13 09:23:14
Original
2951 Leute haben es durchsucht

Bitte schauen Sie sich den Code direkt an:

Zitat:

<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">
Nach dem Login kopieren

HTML-Teil:


</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>
Nach dem Login kopieren

JS-Teil:


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);
});
Nach dem Login kopieren

ajaxDirect ist Ajax mit einer anderen Wendung, Sie können es ignorieren


/**
* 返回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
	});
}
Nach dem Login kopieren

Der Effekt ist wie im Bild dargestellt:

Weitere Optionseinstellungen:

  • Filter: Filterung, d. h. bei der Eingabe von Inhalten stimmt die Dropdown-Option mit den eingegebenen Zeichen überein, unterstützt Chinesisch, wahr/falsch, standardmäßig auf WAHR.

  • Effekte: Animationseffekt Wenn das Dropdown-Auswahlfeld aktiviert wird, werden im Dropdown-Feld drei Werte angezeigt: Standard, Schieben und Ausblenden ist Standard.

  • Dauer: Die im Dropdown-Optionsfeld angezeigte Geschwindigkeit der Übergangsanimation, einschließlich schnell, langsam und Anzahl (Millisekunden). Die Standardeinstellung ist schnell.

  • Ereignis

  • onCreate: Wird ausgelöst, wenn eine Eingabe erfolgt.

  • onShow: Wird beim Herunterziehen ausgelöst.

  • onHide: Wird ausgelöst, wenn das Dropdown-Feld ausgeblendet ist.

  • onSelect: Wird ausgelöst, wenn die Option im Dropdown-Feld ausgewählt wird.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie das bearbeitbare Bootstrap-Dropdown-Feld jquery.editable-select. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage