實時監(jiān)控input框,實現(xiàn)輸入框與下拉框聯(lián)動的實例

更新時間：2018年01月23日 10:10:35 作者：包子kamiya

下面小編就為大家分享一篇實時監(jiān)控input框,實現(xiàn)輸入框與下拉框聯(lián)動的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如圖：

html代碼

<tr>
 <th scope="row">獎勵類型：</th>
 <td><input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="輸入關(guān)鍵字" />
  <select name="reward_id" id="reward_id"> 
   <option value="">---請選擇---</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);
}

以上這篇實時監(jiān)控input框,實現(xiàn)輸入框與下拉框聯(lián)動的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery動態(tài)加載css文件實現(xiàn)方法
使用jQuery來加載一個外部的 css 文件，首先創(chuàng)建一個 link 元素，并將它添加到標(biāo)記中即可。那么基于jquery代碼如何實現(xiàn)呢？下面小編給大家介紹jQuery動態(tài)加載css文件實現(xiàn)方法，需要的朋友參考下吧
2016-06-06
jQuery實現(xiàn)文章收起與展開功能
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)文章收起與展開功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
30個精美的jQuery幻燈片效果插件和教程
這篇文章與大家分享30個精美的的 jQuery 幻燈片效果插件和教程。您可能經(jīng)常能看到一些網(wǎng)站上特色區(qū)域的內(nèi)容以滾動方式變化
2011-08-08
基于JQuery的密碼強(qiáng)度驗證代碼
密碼強(qiáng)度驗證的方式有很多，今天給大家推薦一個通過JQuery實現(xiàn)的密碼強(qiáng)度驗證控件，只需要很少的代碼便能實現(xiàn)。
2010-03-03
jQuery取id有.的值的方法
用jQuery取值，當(dāng)一個id中含有.時，這個時候正常的取法是做不到的，因此請看下文
2014-05-05
jquery實現(xiàn)的縮略圖預(yù)覽滑塊實例
這篇文章主要介紹了jquery實現(xiàn)的縮略圖預(yù)覽滑塊,實例分析了jQuery縮略圖預(yù)覽滑塊的實現(xiàn)與使用技巧,并提供了完整的實例下載,需要的朋友可以參考下
2015-06-06
Jquery優(yōu)化效率提升性能解決方案
jQuery是目前非常流行的Javascript庫之一，隨著jQuery應(yīng)用程序的逐漸增多，其性能優(yōu)化問題是程序員們不可忽視的，我們知道在jQuery中最快的選擇器是ID選擇器，因為它直接來自于JavaScript的getElementById()方法。
2010-09-09
jQuery事件注冊的實現(xiàn)示范
jQuery為我們提供了方便的事件注冊機(jī)制，它的優(yōu)點，操作簡單，且不用擔(dān)心事件覆蓋等問題。缺點，普通的事件注冊不能做事件委托，且無法實現(xiàn)事件解綁，需要借助其他方法
2022-07-07
基于PHP和Mysql相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動態(tài)讀取和加載外部數(shù)據(jù)，本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示，以及可以通過輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過程
2015-12-12
文本域光標(biāo)操作的jQuery擴(kuò)展分享
最近的項目中，好幾次用到操作文本域的方法，比如光標(biāo)位置、刪除光標(biāo)前字符等。每次都是查閱資料（這部分操作涉及到的js方法都比較生僻），費時費事。于是就封裝了一個jQuery擴(kuò)展
2014-03-03