当前位置:首页 > 编程教程 > jQuery技术文章 > 实时监控input框,实现输入框与下拉框联动的实例

监控input框,实现输入框与下拉框联动的代码详解

  • 发布时间:
  • 作者:码农之家
  • 点击:153

这篇文章主要知识点是关于监控、input框、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

Tags:监控 input框 

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

如图:

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

html代码

<tr>
 <th scope="row">奖励类型:</th>
 <td><input value="" type="text" name="item" id="reward"  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框,实现输入框与下拉框联动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jquery 相关电子书
学习笔记
网友NO.870586

input框中自动展示当前日期yyyy/mm/dd的实现方法

直接上代码: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleinput框中自动展示当前日期/title/headbody input type="text" id="input" script //获取input元素 var _input = document.getElementById('input'); var date = new Date(); var seperator = "/"; var year = date.getFullYear(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month = 1 month = 9) { month = "0" + month; } if (strDate = 0 strDate = 9) { strDate = "0" + strDate; } var currentDate = year + seperator + month + seperator + strDate; //当前日期 _input.value = currentDate; //赋值给input.value _input.setAttribute('disabled', 'disabled'); //不可编辑 /script/body/html 这里注意,getMonth()方法,使用本地时间。返回值是 0(一月) 到 11(十二月) 之间的一个整数。 以上这篇input框中自动展示当前日期yyyy/mm/dd的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农……

网友NO.881588

将input框中输入内容显示在相应的div中【三种方法可选】

例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: !DOCTYPE htmlhtml head meta charset="UTF-8" title/title link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" / style type="text/css" #div{ width: 175px; height: 100px; margin: 20px 84px; border:2px solid green; } /style /head body div class="container" 请输入内容:input type="text" id="put" / div id="div" /div /div /bodyscript src="js/jquery-3.1.1.js"/scriptscript src="js/bootstrap.js"/script js:原生DOM操作 script type="text/javascript"var put1=document.getElementById("put"); var div1=document.getElementById("div"); put1.onkeyup=function(){ div1.innerText=put1.value; }/script 指点迷津: getElementById获取DOM节点,innerHTML:设置或者获取节点内部的所有HTML代码; 这里需要注意获取到input里面的节点内容需要获取value值。 这里使用的是innerHTML属性和value属性,注意与JQ中的方法区分 JQ操作……

网友NO.756430

jQuery实现动态添加和删除input框实例代码

本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title选项/title script type="text/javascript" src="js/jquery-1.8.3.js"/script script$(function(){// 添加选项$("#opbtn").click(function(){if($("#optsli").size() 6){// 最多添加6个选项$("#opts").append("liinput //li");}else{// 提示选项个数已经达到最大$("#optips").html("选项个数已经达到最大,不能再添加!");$("#optips").css({"color":"red"});}});// 删除选项$("#delbtn").click(function(){if($("#optsli").size() = 0){$("#optips").html("已经没有选项可以删除了!");$("#optips").css({"color":"red"});} else{// 删除选项,每次删除最后一个$("#optsli").last().remove();}});}); /script style*{margin: 0px;padding: 0px;}#dv{width: 100px;height: 100px;background-color: yellow;margin: 0px auto 0px;}/style/headbodydiv input id="opbtn" type="button" value="添加选项"/input id="delbtn……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757