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


相关文章
|
7月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
98 0
|
7月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
48 3
|
2月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
67 0
|
2月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
111 0
|
7月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
3月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
238 2
|
4月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
81 3
|
7月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
84 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
6月前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20