Maison > interface Web > js tutoriel > 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

小云云
Libérer: 2018-01-12 09:14:49
original
1487 Les gens l'ont consulté

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"  
}]
Copier après la connexion

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>
Copier après la connexion

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);
Copier après la connexion

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);
      }
    }
  })
Copier après la connexion

Utiliser


$(function () {
  
})
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal