菜单 搜索
首页 前端知识 jQuery select三级联动

jQuery select三级联动

2024-01-29 13:01:22 前端知识 前端哥 659 39 我要收藏

功能描述：

一：ajax请求数据

1 实现三级联动，ajax请求数据。
  1. 根据选定级别，查询该级别下的项目类别；
  2. 根据选择类别，查询该级别+类别下所属项目列表；

前端涉及知识点：
（1）(‘#app’).change() 下拉框选择事件；
（2）ajax() ajax发送请求；
（3）(“#app”).empty(); 清空元素内容；
（4）( “#app” ).append(); 向元素压入元素；

<tr>
    <td width='16%' height=25 bgcolor='ffffff'><span style="color: red;">*</span>被认定的最高级别</td>
    <td bgcolor='ffffff'>
        <select name="ftitle" id="ftitle">
            <option value="">选择项目最高级别</option>
            <option value="0">国家级</option>
            <option value="1">省级</option>
            <option value="2">市级</option>
            <option value="3">县级</option>
        </select>
    </td>
</tr>
<tr>
    <td width='16%' height=25 bgcolor='ffffff'><span style="color: red;">*</span>选择类别</td>
    <td bgcolor='ffffff'>
        <select class="category" name="category" id="category">
            <option value="">选择类别</option>
        </select>
    </td>
</tr>
<tr>
    <td width='16%' height=25 bgcolor='ffffff'><span style="color: red;">*</span>项目</td>
    <td bgcolor='ffffff'>
        <select id="classalias" class="classalias">
            <option value="">选择项目</option>
        </select>
    </td>
</tr>
 
<script type="text/javascript">
    $('#ftitle').change(function(){
        var ftitle = $('#ftitle').val();
        var leibieurl = "e/Info/master.php";
        $.ajax({
            url: leibieurl,
            data: { "ftype": ftitle,"type" :1 },
            datatype: "json",
            type: "post",
            success: function (data) {
                var datas = JSON.parse(data);
                var categoryHtml = "";
                 $("#category").empty();
                for (var i in datas) {
                    categoryHtml += "<option value='" + datas[i] + "'>" + datas[i] + "</option>";
                }
                $( "#category" ).append( categoryHtml );
            }
        });
 
    });
    $('#category').change(function(){
        var ftitle = $('#ftitle').val();
        var category = $(this).val();
        var leibieurl = "e/DoInfo/master.php";
        $.ajax({
            url: leibieurl,
            data: { "ftype": ftitle,"category" :category ,"type" :2 },
            datatype: "json",
            type: "post",
            success: function (data) {
                var datas = JSON.parse(data);
                var classaliasHtml = "";
                 $("#classalias").empty();
                for (var i in datas) {
                    classaliasHtml += "<option value='" + datas[i] + "'>" + datas[i] + "</option>";
                }
                $( "#classalias" ).append( classaliasHtml );
            }
        });
    });
</script>
复制

e/Info/master.php

<?php
require("../class/connect.php");
require("../class/db_sql.php");
require("../data/dbcache/class.php");
require("../member/class/user.php");
require("../class/q_functions.php");
require LoadLang("pub/fun.php");
$link=db_connect();
$empire=new mysqlquery();
//验证是否登陆
$user=islogin();
$type=(int)$_POST['type'];
$ftype=(int)$_POST['ftype'];
if ($type == 1) {
    //取得模型id
    $ttsql=$empire->query("select id,leibie from {$dbtbpre}ecms_master where type='$ftype'");
    $lbArr = [];
    while($ttr=$empire->fetch($ttsql))
    {
 
        $lbArr[] = $ttr['leibie'];
    }
    $lbarr = array_unique($lbArr);
} elseif ($type == 2) {
    $leibie = $_POST['category'];
    $sql = "select id,xiangmu from {$dbtbpre}ecms_master where type='$ftype' AND leibie = '$leibie'";
    $ttsql=$empire->query("select id,xiangmu from {$dbtbpre}ecms_master where type='$ftype' AND leibie = '$leibie'");
    $lbArr = [];
    while($ttr=$empire->fetch($ttsql))
    {
        $lbArr[] = $ttr['xiangmu'];
    }
    $lbarr = array_unique($lbArr);
}
 
db_close();
$empire=null;
exit(json_encode($lbarr));
?>
复制
2 根据选择内容，增加/删除元素。
  1. 选择级别，需要对应填写该级别以及该级别以下的认证信息。比如：选择省级，就需要填写省级、市级、县级的认证信息。
  2. 认证信息框中，级别默认，不能再下拉筛选；

前端涉及知识点：
（1）find() 查询元素；
（2）使用for循环，从后往前remove删除元素；
（3）(“select[name=‘declaration_1[]’]”).each() 查询元素集，并遍历元素；

<script>
    function domvadd_declaration() {
        var i;
        var str = '';
        var oldi = 0;
        var j = 0;
        var addnum = 0;
        addnum = parseInt( document.add.mvaddnum_declaration.value );
        oldi = parseInt( document.add.mveditnum_declaration.value );
        j = parseInt( addnum + oldi );
        str = str + '<tr><td style="font-weight: 700;">认定情况' + j + '</td></tr><tr><td  width="16%" ><span style="color: red;">*</span>级别</td><td align="center"><select name="declaration_1[]" id="declaration_1_' + j + '"><option value="">选择级别信息</option><option value="国家级">国家级</option><option value="省级">省级</option><option value="市级">市级</option><option value="县级">县级</option><option value="其他">其他</option></select></td><td></td></tr><tr><td  width="16%">编号</td><td align="center"><input type="text" name="declaration_2[]" id="declaration_2_' + j + '" value=""></td></tr><tr><td  width="16%">类别</td><td align="center"  width="60%"><input type="text" name="declaration_3[]" id="declaration_3_' + j + '" value=""></td><td></td></tr><tr><td  width="16%" ><span style="color: red;">*</span>列入时间</td><td align="center"><input type="text" name="declaration_4[]" id="declaration_4_' + j + '" value="" readonly="readonly"></td></tr><tr><td  width="16%">批次</td><td align="center"><input type="text" name="declaration_5[]" id="declaration_5_' + j + '" value=""></td></tr><tr><td  width="16%"><span style="color: red;">*</span>项目名称</td><td align="center"><input type="text" name="declaration_6[]" id="declaration_6_' + j + '" value=""></td></tr><tr><td  width="16%">申请地区和单位</td><td align="center"><input type="text" name="declaration_7[]" id="declaration_7_' + j + '" value=""></td></tr><tr><td  width="16%">认证单位</td><td align="center"><input type="text" name="declaration_8[]" id="declaration_8_' + j + '" value=""></td></tr>';
        $( "#mvadd_declaration" ).append( str );
        var str2 = '<s' + 'cript type="text/javascript">$("#declaration_4_' + j + '").dateSelect();</s' + 'cript>';
        $( "#mvadd_declaration" ).append( str2 );
        $( "#mveditnum_declaration" ).val( j );
    }
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mvadd_declaration">
    <?php
    $editnum = 1;
    for ( $i = 1; $i <= $editnum; $i++ ) {
        ?>
    <tr>
        <td style="font-weight: 700;">认定情况1</td>
    </tr>
    <tr>
        <td width="16%"><span style="color: red;">*</span>级别</td>
        <td align="center">
            <select name="declaration_1[]" id="declaration_1_1">
                <option value="">选择级别信息</option>
                <option value="国家级">国家级</option>
                <option value="省级">省级</option>
                <option value="市级">市级</option>
                <option value="县级">县级</option>
                <option value="其他">其他</option>
            </select>
        </td>
        <td></td>
    </tr>
    <tr>
        <td width="16%">编号</td>
        <td align="center" width="60%"><input type="text" name="declaration_2[]" id="declaration_2_1" value="">
        </td>
    </tr>
    <tr>
        <td width="16%">类别</td>
        <td align="center"><input type="text" name="declaration_3[]" id="declaration_3_1" value="">
        </td>
    </tr>
    <tr>
        <td width="16%"><span style="color: red;">*</span>列入时间</td>
        <td align="center"><input type="text" name="declaration_4[]" id="declaration_4_1" value="" readonly="readonly">
        </td>
    </tr>
    <tr>
        <td width="16%">批次</td>
        <td align="center"><input type="text" name="declaration_5[]" id="declaration_5_1" value="">
        </td>
    </tr>
    <tr>
        <td width="16%"><span style="color: red;">*</span>项目名称</td>
        <td align="center"><input type="text" name="declaration_6[]" id="declaration_6_1" value="">
        </td>
    </tr>
    <tr>
        <td width="16%">申请地区和单位</td>
        <td align="center"><input type="text" name="declaration_7[]" id="declaration_7_1" value="">
        </td>
    </tr>
    <tr>
        <td width="16%">认证单位</td>
        <td align="center"><input type="text" name="declaration_8[]" id="declaration_8_1" value="">
        </td>
    </tr>
    <?php
    }
    ?>
    </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <script type="text/javascript">
            $( "#declaration_4_1" ).dateSelect();
        </script>
        <td height="25"> <input name="mveditnum_declaration" type="hidden" id="mveditnum_declaration" value="<?=$editnum?>">
            <input name="mvnum_declaration" type="hidden" id="mvnum_declaration" value="8">
            <input name="mvmust_declaration" type="hidden" id="mvmust_declaration" value="1">
            <input name="mvaddnum_declaration" type="text" id="mvaddnum_declaration" value="1" size="6" style="display: none;"> <input type="button" name="Submit5" value="添加另一个认证" onclick="javascript:domvadd_declaration();">
        </td>
    </tr>
</table>
复制

二 已整理好数据联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三级联动</title>
</head>
<style>
    .option:after{
      content: "";
      width: 1px;
      height: 25px;
      background-color: #ccc;
    /*通过定位将图标放在合适的位置*/
    position: absolute;
      right: 20px;   
      top: 50%;
      transform: translateY(-50%);
    /*给自定义的图标实现点击下来功能*/
    pointer-events: none;
    }
    .option{
    width: 180px;   
    height: 30px;
    border: 1px solid #cccccc;
    position: relative;
  }
  .option select{
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  /*将select的宽高等于div的宽高*/
  width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    padding-right:20px ;  
  }    
  .flex{
      display: flex;
      justify-content: start;
      align-items: center;
  }  
  .margin-left{
      margin-left: 10px;
  }
</style>
<body>
    <form action="" name="add">
        <div class="flex">
            <div class="option margin-left">
                <select name="ftitle" onchange="getCategory()" >  
                    <option value="">请选择所在的省份</option>
                    <option value="国家级">国家级</option>
                    <option value="省级">省级</option>
                    <option value="市级">市级</option> 
                    <option value="县级">县级</option> 
                </select>
            </div> 
            <div class="option margin-left">   
                <select id="category" name="category" onchange="getClassalias()">
                    <option value="">请选择项目类别</option>
                </select>
            </div>
            <div class="option margin-left">
                <select name="classalias" id="classalias">
                    <option value="">请选择项目</option>
                </select>
            </div>
        </div>
    </form>
    <script>
    // 定义项目类别
    var categorySelect = [
        ['民间文学','传统音乐','民俗'],
        ['曲艺','传统美术'],
        ['戏曲','传统工艺','传统技艺'],
        ['手工技艺','民间习俗']
    ];
    // 定义项目
    var classSelect = [
        [['梁祝传说','木兰传说'],['唢呐艺术','信仰民歌'],['重阳节','打铁花','庙会']],
        [['大调曲子','三弦书（南阳三弦书）'],['糖画']],
        [['豫剧','宛梆'],['道口烧鸡制作技艺'],['开封马豫兴桶子鸡','开封第一楼小笼灌汤包子','开封又一新糖醋软熘鲤鱼焙面']],
        [['商丘方言土语'],['柳圈火神庙会']]
    ];
    // 获取元素
    var getFtitle = document.forms['add'].ftitle;
    var Category = document.forms['add'].category;
    var Classalias = document.forms['add'].classalias;
    // 根据级别获取类别
    function getCategory()
    {
        // 初始化
        Category.length = 1;
        Classalias.length = 1;
        var getSelectIndex = getFtitle.selectedIndex;
        // 匹配到下面的项目类别
        var fCategory = categorySelect[getSelectIndex-1];
        for (var i = 0; i < fCategory.length; i++) {
            Category[i+1] = new Option(fCategory[i],fCategory[i]);
        }
    }
    // 根据类别获取项目
    function getClassalias()
    {
        var getSelectIndex = getFtitle.selectedIndex;
        var getCategorySIndex = Category.selectedIndex;
        var cClassalias = classSelect[getSelectIndex - 1][getCategorySIndex - 1];
        for (var i = 0; i < cClassalias.length; i++) {
            Classalias[i+1] = new Option(cClassalias[i],cClassalias[i]);
        }
    }
    
</script>
 
复制

总结

又是不想写总结的一天，没什么才艺，给大家展示个乒乓对打吧~
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/753.html
标签
json
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

HTML5 css3课后习题【一】

2024-02-10 19:02:20

HTML零基础入门教程（详细）

2024-02-10 19:02:02

css3 table表格

2024-02-10 19:02:01

CSS 基础知识 选择器

2024-02-10 19:02:50

用HTML CSS实现旋转的立方体

2024-02-10 19:02:46

float,flex和grid布局

2024-02-10 19:02:41

CSS3 用户界面、图片、按钮

2024-02-10 19:02:39

ant-design的Table组件暂无数据，滚动条位置修改

2024-02-10 19:02:21

定位position（绝对定位absolute 相对定位 relative）

2024-02-10 19:02:16

vue3内置组件Transition简单介绍和应用

2024-02-10 19:02:11

广告位招租：QQ85750956
大家推荐的文章
1

移动端css布局大全

2024-02-06 15:02:421000
2

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
3

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
4

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
5

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
6

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
7

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995
8

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995
9

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
10

玩转H5和CSS3，轻松打造视觉盛宴

2024-02-08 15:02:44993

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！