ajax实现数据库获取select二级联动下拉菜单

最新推荐文章于 2021-07-20 12:03:33 发布

原创

最新推荐文章于 2021-07-20 12:03:33 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#select #ajax #二级联动

本文介绍如何利用Ajax技术与ThinkPHP框架配合，动态从数据库中获取数据，实现在HTML select元素中的二级联动效果。通过jQuery选择器和事件监听，触发Ajax请求，后端ThinkPHP处理数据并返回，更新前端下拉选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML内容：

<li>
    <span>一级分类：</span>
    <select name="yjid" class="yjid">
        <option value="">---所属分类---</option>
        <volist name="list" id="vo">
            <option value="{$vo['id']}">{$vo['name']}</option>
        </volist>
    </select>
</li>
<li>
    <span>二级分类：</span>
        <select name="ejid" class="ejid">
            <option value="">---所属分类---</option>
    </select>
</li>

jQuery内容：

<script>
  $(function(){
    $('.yjid').change(function(){
      var yjid = $('.yjid').val();
      $.ajax({
        url:"{:U('index/daohang_add_ajax')}",
        type:"POST",
        async:true,
        dataType:"json",
        data:{'yjid':yjid},
        success:function(data){
          var str = "";
          $.each(data, function(index, value){
            str += '<optio