Home >Web Front-end >JS Tutorial >Detailed explanation of examples of easyUI drop-down list click events

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

Y2J
Y2JOriginal
2018-05-14 16:38:362681browse

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"  
}]

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>

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

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

Use

$(function () {
  
})

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!

Statement:
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