实时监控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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
从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
星际争霸任务指南——神族
2020/03/04 星际争霸
解析argc argv在php中的应用
2013/06/24 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
保护环境建议书
2014/03/12 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
结婚老公保证书
2015/02/26 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
Python实现排序方法常见的四种
2021/07/15 Python
sql server 累计求和实现代码
2022/02/28 SQL Server