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


Posted in Javascript onJanuary 23, 2018

如图:

实时监控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框,实现输入框与下拉框联动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 #Javascript
浅谈vue项目重构技术要点和总结
Jan 23 #Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 #Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 #Javascript
three.js 入门案例详解
Jan 23 #Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 #Javascript
vuex的使用及持久化state的方式详解
Jan 23 #Javascript
You might like
PHP控制网页过期时间的代码
2008/09/28 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP常用的小程序代码段
2015/11/14 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
vue综合组件间的通信详解
2017/11/06 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Django设置Postgresql的操作
2020/05/14 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
教师自荐信
2013/12/10 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
德语专业求职信
2014/03/12 职场文书
常务副总经理任命书
2014/06/05 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
倡议书怎么写?
2019/04/11 职场文书
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android