EasyUI drop-down list click event usage example sharing-JS Tutorial-php.cn

EasyUI drop-down list click event usage example sharing

小云云

Release： 2018-01-12 09:14:49

Original

1443 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. I hope it can help everyone.

The example of this article shares the method of using easyUI drop-down list click event for your reference. The specific content is as follows

You can use input and selectTo create a drop-down list

The select is created as follows:

Create a js array through json

[{  
  "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; --->Default display

Click to modify event　　

onSelect is equivalent to onChange

But the trouble is: onChange is not supported in easyUI, and onSelect is not supported 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:

EasyUI Datebox date verification start date is less than the end time example sharing

easyUI's Usage examples of droppable and draggable in drag operations

Detailed explanation of inline editing examples of dataGrid in EasyUI

The above is the detailed content of EasyUI drop-down list click event usage example sharing. For more information, please follow other related articles on the PHP Chinese website!