Select下拉框使用ajax异步绑定数据

简介: Select下拉框使用ajax异步绑定数据
<!--前端样式-->
<style>
    #searchs {
        width: 200px;
        position: absolute;
        border-top: none;
        margin-top: -5px;
        margin-left:112px;
    }
    .line {
        font-size: 12px;
        color: #000;
        background: #C0C0C0;
        width: 200px;
        padding: 1px;
        border:0.5px solid #fff;
        text-align:center;
    }
    .hover {
        background: #007ab8;
        color: #fff;
        cursor: pointer;
    }
</style>
<!--绑定的下拉框-->
<div>
<h6>商品名称:</h6>
<input type="text" id="MerchantsNmae" autocomplete="off"/> <span>输入关键字进行商家查询</span>
<div id="searchs">
</div>
</div>
<!--异步商家名称-->
<script type="text/javascript">
    $(function () {
        $("#searchs").hide();
        //无刷新技术获取通道信息keyup监听事件
        $("#MerchantsNmae").keyup(function () {
            $.ajax({
                async:false,
                data: {SupplierName: $("#MerchantsNmae").val() },
                url: '/Admin/UnitedSecurities/GetSupplierName',
                type: 'post',
                datatype: 'json',
                success: function (msg) {
                    $("#searchs").show();
                    //转化为json对象
                    var getdata = msg.data;
                    var Content = "<select multiple=\"multiple\" style=\"border-radius:2px\">";
                    if (getdata.length<=0) {
                        Content += "<option class='line'>无此商户</option>";
                    }
                    else {
                    //获取getdata数据中的数量遍历对象
                    for (var i = 0; i < getdata.length;i++) {
                        Content += "<option class='line'>" + getdata[i].SupplierName + "</option>";
                    }
                    }
                    Content += "</select>";
                    //清空
                    $("#searchs").empty();
                    $("#searchs").append(Content);
                    $(".line").hover(function () {
                        $(this).addClass("hover");
                    },
                        function () {
                            $(this).removeClass("hover");
                        });
                    //单击选折事件
                    $(".line").click(function () {
                        $("#MerchantsNmae").val($(this).text());
                        $("#searchs").empty();
                    });
                }
            });
        });
        //加载事件隐藏
        $(document).click(function () {
            $("#searchs").hide();
        });
    })
</script>

效果图:keyup()事件按键被松开时发生keyup()事件,从而触发ajax触发模糊查询获取后台数据库中的数据,然后动态绑定到下拉框中

image.png


相关文章
|
1月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
1月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
1月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
1月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
77 0
|
1月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
1月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
40 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
4天前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
6 0
|
21天前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
15 0
|
1月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
32 3
|
1月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框