实时监控input框，实现输入框与下拉框联动

最新推荐文章于 2025-11-13 07:56:03 发布

原创最新推荐文章于 2025-11-13 07:56:03 发布 · 7.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#input实时监控 #HTML #PHP

PHP 同时被 3 个专栏收录

25 篇文章

订阅专栏

jQuery

7 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文介绍了一种使用HTML、jQuery及PHP实现的输入框与下拉框联动的方法。当用户在输入框中输入文字时，系统会通过AJAX请求从服务器获取匹配的数据，并更新下拉框的内容。

实时监控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);
}