快捷導(dǎo)航

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

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

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

如圖：

html代碼

<tr>
 <th scope="row">獎(jiǎng)勵(lì)類(lèi)型：</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="">---請(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);
}

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

您可能感興趣的文章:

相關(guān)文章

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