**

①省市联动

**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>

<!--定义下拉列表-->
<body>
省份：<select id="qaq">
        <option value="">--请选择省份--</option>
      </select>
城市：<select id="wer">
    <option value="">--请选择城市--</option>
    </select>
</body>

<script>
        $.get("ProvinceServlet",{},function (response) {
            var str="<option value=\"\">--请选择省份--</option>";
            for (var i = 0; i <response.length ; i++) {
                //返回省份的json字符串数组，通过遍历这个数组获取每一个元素，给value赋值所对应城市的id
                str+="<option value='"+response[i].provinceID+"'>"+response[i].province+"</option>";
            }
            //使用html方法设置内容会把之前的覆盖，所以在上面用字符串拼接之前的内容
            $("#qaq").html(str);
        });
        //给省份下拉框绑定一个内容改变的事件
        $("#qaq").change(function () {
            //获取选择省份对应的id值
            var val = $("#qaq").val();
            发送异步请求
            $.post("FindCityServlet",{"provinceID":val},function (response) {
                var str="<option value=\"\">--请选择城市--</option>";
                for (var i = 0; i <response.length ; i++) {
                    str+="<option value=''>"+response[i].city+"</option>";
                }
                $("#wer").html(str);
            })
        })
</script>
</html>

②搜索提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<form autocomplete="off">
    <div class="content">
        <input type="text" id="username">
        <input type="button" value="搜索一下">
        <!--嵌套一个div标签，用来展示数据库搜索到的内容-->
        <div id="show" class="show"></div>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //定义一个记号，用于判断是否发送异步请求，解决请求发送过于频繁的问题
    var flag=true;
    //为输入框绑定一个只要有文字输入就发送请求的功能
    $("input[type=text]").on("input",function () {
        //获取文本输入框中的内容
        var value = $("input[type=text]").val();
        if (value) {
            if (flag){
                //获取到值以后dao层的查询的语句为（SELECT NAME FROM USER WHERE NAME LIKE CONCAT('%',#{value},'%') ORDER BY search_count DESC LIMIT 0,4）
                $.post("SearchLikeServlet",{"value":value},function (data) {
                    //定义一个初始的展示数据的div中的内容一个初始值
                    var strs="";
                    if (data){
                        for (var i = 0; i < data.length; i++) {
                            strs+='<div>'+data[i].name+'<div>'
                        }
                        //有数据则展示调用show()方法
                        $("#show").html(strs).show();
                    }
                });
                //把标记改为false，设置一个定时任务，表示1秒后才会从新根据文本框中的内容去从新发送请求
                flag=false;
                setTimeout(function () {
                    flag=true;
                },1000);
            }
        }else{
            //文本框没有改变的时候，用于展示的div为隐藏状态
            $("#show").hide();
        }
    })
</script>
</html>
# vue.js # javascript # jquery # html
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign