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

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>

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>

Code PHP

public function add_alms()
{
 $reward = $this->materials->selReward();
 $this->assign('reward',$reward);
 return $this->fetch();
}
public function do_add_alms()
{
 $data = Request::instance()->param();
 $this->alms->addAlms($data);
}

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!