实现输入框与下拉框联动

下面我就为大家分享一篇实时监控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);
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue2.5中通过json文件读取数据的方法

在vue2.5.2中使用http请求如何获取静态json数据

在jQuery幻灯片中使用插件owlcarousel（详细教程）

在ES6箭头函数中有关this方面的问题？

在vue中使用echarts3.0自适应的方法有哪些？

在swiper中如何解决动态加载数据滑动失效的问题？

以上就是实现输入框与下拉框联动的详细内容，更多请关注其它相关文章！