欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-08-06 09:06:34|栏目:jquery|点击:

如图:

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 file标签中看jQuery的 .val() 和 .attr(“value”) 区别

栏    目:jquery

下一篇:jQuery实现鼠标点击弹出渐变层的方法

本文标题:实时监控input框,实现输入框与下拉框联动的实例

本文地址:http://www.codeinn.net/misctech/164578.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有