Maison  >  Article  >  interface Web  >  Liste déroulante EasyUI, cliquez sur le partage d'exemple d'utilisation d'événement

Liste déroulante EasyUI, cliquez sur le partage d'exemple d'utilisation d'événement

小云云
小云云original
2018-01-12 09:14:491429parcourir

Cet article présente principalement en détail l'utilisation des événements de clic de liste déroulante easyUI. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'exemple de cet article partage la méthode d'utilisation de l'événement de clic de liste déroulante easyUI pour votre référence. Le contenu spécifique est le suivant

Vous pouvez utiliser input et selectPour créer une liste déroulante

La sélection est créée comme suit :

Créez un tableau js via json


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

Exemple :

Extrait de code HTML :


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

Extrait de code js :


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 Affichage de l'effet :

Explication de l'attribut :

valueField:'id'---objTCP.id-- -> valeur de l'option valeur
textField :'text'---objTCP.text--->Valeur d'affichage de la page
objTCP.selected=true; --->Affichage par défaut

Cliquez pour modifier l'événement  

onSelect est équivalent à onChange
mais le problème est : onChange n'est pas pris en charge dans easyUI et onSelect n'est pas pris en charge en HTML.
onSelect doit être utilisé dans le code js :


$("#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);
      }
    }
  })

Utiliser


$(function () {
  
})

Après le chargement par défaut, l'événement onSelect peut être utilisé normalement.

Recommandations associées :

La date de début de la vérification de la date EasyUI Datebox est inférieure à l'heure de fin du partage d'exemple

easyUI Exemples d'utilisation de droppable et draggable dans les opérations de glisser

Explication détaillée des exemples d'édition en ligne de dataGrid dans EasyUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn