如何實(shí)時(shí)監(jiān)控input框與下拉框聯(lián)動(dòng)

這篇文章主要介紹了如何實(shí)時(shí)監(jiān)控input框與下拉框聯(lián)動(dòng)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

如圖：

html代碼

<tr>
 <th scope="row">獎(jiǎng)勵(lì)類型：</th>
 <td><input value="" type="text" name="item" id="reward"  placeholder="輸入關(guān)鍵字" />
  <select name="reward_id" id="reward_id"> 
   <option value="">---請(qǐng)選擇---</option>
   {foreach $reward as $value}
   <option value="{$value['material_id']}">{$value['material_name']}</option>
   {/foreach}
  </select>
 </td>
</tr>

JQuery代碼

<script type="text/javascript">
 $('#reward').bind('input propertychange', 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='"+key+"'>"+obj[key]+"</option>"; 
      reward_id.append(option); 
     }
     } 
   } 
 });
 } 
</script>

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);
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何實(shí)時(shí)監(jiān)控input框與下拉框聯(lián)動(dòng)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!