实时监控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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
原生js实现放大镜
Feb 20 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
详解javascript中的Error对象
Apr 25 Javascript
详解Vue-Router源码分析路由实现原理
May 15 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中判断变量为空的几种方法分享
2013/08/26 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
JavaScript 基础问答三
2008/12/03 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
基于vue2.0实现的级联选择器
2017/06/09 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
python 将md5转为16字节的方法
2018/05/29 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
python常量折叠基础知识点讲解
2021/02/28 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
领导党性分析材料
2014/02/15 职场文书
绿色环保口号
2014/06/12 职场文书
英文辞职信范文
2015/05/13 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
详解Python描述符的工作原理
2021/06/11 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS