Maison > interface Web > js tutoriel > le corps du texte

Réaliser le lien entre la zone de saisie et la zone déroulante

亚连
Libérer: 2018-06-09 17:53:55
original
3121 Les gens l'ont consulté

Ci-dessous, je partagerai avec vous un exemple de surveillance en temps réel des zones de saisie et de lien entre les zones de saisie et les listes déroulantes. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Comme indiqué sur l'image :

code html

<tr>
 <th scope="row">奖励类型:</th>
 <td><input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="输入关键字" />
  <select name="reward_id" id="reward_id"> 
   <option value="">---请选择---</option>
   {foreach $reward as $value}
   <option value="{$value[&#39;material_id&#39;]}">{$value[&#39;material_name&#39;]}</option>
   {/foreach}
  </select>
 </td>
</tr>
Copier après la connexion

Code JQuery

<script type="text/javascript">
 $(&#39;#reward&#39;).bind(&#39;input propertychange&#39;, function() {reward();});
 function reward()
 {
  var search = $("#reward").val();
  $.ajax({ 
   type:"get", 
   url:"/mall/config_commodity_info/search_commodity_info", 
   data:{search:search}, 
   success:function(select){ 
     var reward_id = $("#reward_id"); 
     if (select) {
     $("option",reward_id).remove();
     var obj = JSON.parse(select);
     for (var key in obj) {
      var option = "<option value=&#39;"+key+"&#39;>"+obj[key]+"</option>"; 
      reward_id.append(option); 
     }
     } 
   } 
 });
 } 
</script>
Copier après la connexion

Code PHP

public function add_alms()
{
 $reward = $this->materials->selReward();
 $this->assign(&#39;reward&#39;,$reward);
 return $this->fetch();
}
public function do_add_alms()
{
 $data = Request::instance()->param();
 $this->alms->addAlms($data);
}
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, je j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment lire des données via des fichiers json dans Vue2.5

Utiliser http dans vue2.5.2 Demander comment obtenir des données json statiques

Utilisation du plugin Owlcarousel dans le diaporama jQuery (tutoriel détaillé)

À propos de cette question dans les fonctions fléchées ES6 ?

Quelles sont les façons d'utiliser echarts3.0 adaptatif dans vue ?

Comment résoudre le problème de l'échec du glissement des données chargées dynamiquement dans swiper ?

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