首頁  >  文章  >  web前端  >  實現輸入框與下拉框聯動

實現輸入框與下拉框聯動

亚连
亚连原創
2018-06-09 17:53:553101瀏覽

下面我就為大家分享一篇即時監控input框,實現輸入框與下拉框聯動的實例,具有很好的參考價值,希望對大家有所幫助。

如圖:

#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>

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>

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

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在Vue2.5中透過json檔案讀取資料的方法

在vue2.5.2中使用http請求如何取得靜態json資料

在jQuery投影片中使用外掛程式owlcarousel(詳細教學)

在ES6箭頭函數中有關this方面的問題?

在vue中使用echarts3.0自適應的方法有哪些?

在swiper如何解決動態載入資料滑動失效的問題?

以上是實現輸入框與下拉框聯動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn