Detailed explanation of bootstrap editable drop-down box jquery.editable-select example-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of bootstrap editable drop-down box jquery.editable-select example

May 10, 2018 pm 02:33 PM

bootstrap Example

This article mainly introduces the relevant information of jquery.editable-select, the editable drop-down box of bootstrap. Friends who need it can refer to it. I hope it can help everyone.

Bootstrap tutorial】

Then please look at the code directly:

Quote:

&lt;script type=&quot;text/javascript&quot; src=&quot;${ contextPath }/res/sys/scripts/jquery.editable-select.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;${ contextPath }/res/sys/scripts/css/jquery.editable-select.min.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot;&gt;

Copy after login

HTML part :

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

Copy after login

JS part:

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

Copy after login

The json returned by the url is : [{"dataDictNo":"024001","gbNo":"","name":"Kilograms ","nameInitAbbr":"QK","parentNo":"024"}]

ajaxDirect is ajax with a different twist, which can be ignored

/**
* 返回JSON形式的数据
* @param url 地址
* @param data 参数
* @param func 返回函数
* @param async 是否异步
*/
function ajaxDirect(url,data,func,async){
if(!async){
async = false;
}
$.ajax({
url:url,
type:&quot;post&quot;,
dataType:&quot;json&quot;,
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, default 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: Triggered when input.

onShow: Triggered when pulled down.

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

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

Related recommendations:

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

Two implementations of editable drop-down box Method_javascript skills

Editable drop-down box implementation code based on jquery_jquery

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

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