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

Detailed explanation of examples of easyUI drop-down list click events

Y2J
Release: 2018-05-14 16:38:36
Original
2563 people have browsed it

This article mainly introduces the use of easyUI drop-down list click events in detail. It has certain reference value. Interested friends can refer to it.

The example in this article shares with you how to use easyUI The method of the click event of the drop-down list is for your reference. The specific content is as follows

You can create a drop-down list through input and select

where select is Create as follows:

Create js by jsonarray

[{  
  "id":1,  
  "text":"text1"  
},{  
  "id":2,  
  "text":"text2"  
},{  
  "id":3,  
  "text":"text3",  
  "selected":true  
},{  
  "id":4,  
  "text":"text4"  
},{  
  "id":5,  
  "text":"text5"  
}]
Copy after login

Example:

html code snippet:

<select id="in_edit_netlink" style="width:160px;" class="easyui-combobox" data-options="valueField:&#39;id&#39;,textField:&#39;text&#39;,editable:false" >
</select>
Copy after login

js code snippet:

var ljfsArray = new Array();
  var objHTTP = new Object();
  objHTTP.text = "HTTP";
  var objTCP = new Object();
  objTCP.text = "TCP";
  objTCP.id = 1;
  objHTTP.id = 2;
  if (data.ljfs == "HTTP") {
    objHTTP.selected=true;
  } else {
    objTCP.selected=true;
  }
  ljfsArray.push(objHTTP);
  ljfsArray.push(objTCP);
  $(&#39;#in_edit_netlink&#39;).combobox(&#39;loadData&#39;, ljfsArray);
Copy after login

Page effect display:

##Attribute Explanation:

valueField: 'id'---objTCP.id--->Option value value

textField:'text'---objTCP.text--->Page display value
objTCP.selected=true; -- ->The default display

Click modification event  

onSelect is equivalent to

onChangeBut the trouble is: easyUI does not Supports onChange, but does not support onSelect in html.
onSelect must be used in js code:

$("#in_edit_netlink").combobox({
    onSelect: function () {
      connectionType = $(&#39;#in_edit_netlink&#39;).val();
      if (connectionType == 1) {
       $(&#39;#in_edit_sjjh&#39;).textbox(&#39;setValue&#39;, tcpIp);
      } else {
       $(&#39;#in_edit_sjjh&#39;).textbox(&#39;setValue&#39;, httpIp);
      }
    }
  })
Copy after login

Use

$(function () {
  
})
Copy after login
After loading by default, the onSelect event can be used normally.


【Related recommendations】


1.

Javascript free video tutorial

2.

vue v-model form Example tutorial of control binding

3.

Bootstrap form validation formValidation example detailed explanation

4.

OffsetWidth bug and processing method in JS

5.

Detailed explanation of examples of jQuery Validate verifying multiple names

The above is the detailed content of Detailed explanation of examples of easyUI drop-down list click events. 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!