实时监控input框,实现输入框与下拉框联动的实例

 更新时间:2018年01月23日 10:10:35   作者:包子kamiya  
下面小编就为大家分享一篇实时监控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['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);
}

以上这篇实时监控input框,实现输入框与下拉框联动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery动态加载css文件实现方法

    jQuery动态加载css文件实现方法

    使用jQuery来加载一个外部的 css 文件,首先创建一个 link 元素,并将它添加到 标记中即可。那么基于jquery代码如何实现呢?下面小编给大家介绍jQuery动态加载css文件实现方法,需要的朋友参考下吧
    2016-06-06
  • jQuery实现文章收起与展开功能

    jQuery实现文章收起与展开功能

    这篇文章主要为大家详细介绍了jQuery实现文章收起与展开功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 30个精美的jQuery幻灯片效果插件和教程

    30个精美的jQuery幻灯片效果插件和教程

    这篇文章与大家分享30个精美的的 jQuery 幻灯片效果插件和教程。您可能经常能看到一些网站上特色区域的内容以滚动方式变化
    2011-08-08
  • 基于JQuery的密码强度验证代码

    基于JQuery的密码强度验证代码

    密码强度验证的方式有很多,今天给大家推荐一个通过JQuery实现的密码强度验证控件,只需要很少的代码便能实现。
    2010-03-03
  • jQuery取id有.的值的方法

    jQuery取id有.的值的方法

    用jQuery取值,当一个id中含有.时,这个时候正常的取法是做不到的,因此请看下文
    2014-05-05
  • jquery实现的缩略图预览滑块实例

    jquery实现的缩略图预览滑块实例

    这篇文章主要介绍了jquery实现的缩略图预览滑块,实例分析了jQuery缩略图预览滑块的实现与使用技巧,并提供了完整的实例下载,需要的朋友可以参考下
    2015-06-06
  • Jquery优化效率 提升性能解决方案

    Jquery优化效率 提升性能解决方案

    jQuery是目前非常流行的Javascript库之一,随着jQuery应用程序的逐渐增多,其性能优化问题是程序员们不可忽视的,我们知道在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。
    2010-09-09
  • jQuery事件注册的实现示范

    jQuery事件注册的实现示范

    jQuery为我们提供了方便的事件注册机制,它的优点,操作简单,且不用担心事件覆盖等问题。缺点,普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法
    2022-07-07
  • 基于PHP和Mysql相结合使用jqGrid读取数据并显示

    基于PHP和Mysql相结合使用jqGrid读取数据并显示

    jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程
    2015-12-12
  • 文本域光标操作的jQuery扩展分享

    文本域光标操作的jQuery扩展分享

    最近的项目中,好几次用到操作文本域的方法,比如光标位置、删除光标前字符等。每次都是查阅资料(这部分操作涉及到的js方法都比较生僻),费时费事。于是就封装了一个jQuery扩展
    2014-03-03

最新评论