Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Select下拉框使用ajax异步绑定数据

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

作者头像
追逐时光者
发布于 2022-02-15 07:17:30
发布于 2022-02-15 07:17:30
1.7K01
代码可运行
举报
文章被收录于专栏:编程进阶实战编程进阶实战
运行总次数:1
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--前端样式-->
<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触发模糊查询获取后台数据库中的数据,然后动态绑定到下拉框中

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
用jQuery模拟select下拉框
很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找,又重新发明轮子鸟:)
菩提树下的杨过
2019/09/12
3.6K0
实现一个带搜索的下拉选择框
带搜索的下拉选择框,其实现成的框架并不少,很多框架的下拉选择框,虽自带ajax搜索,但是在下拉列表的时候,要展示所有数据,在开发的时候,问题来了,如果下拉选择框的数据很多,有几百条怎么办?难道我们要几百条数据全部展示到下拉框?这种体验效果自然很差,然后就想到了自己做一个简单的下拉选择框,会简单很多,也方便使用。
Petrochor
2022/06/07
1.9K0
实现一个带搜索的下拉选择框
jq模拟select下拉框,自定义option的css样式
想修改option样式,只能通过div ul li模拟select功能;功能如下,具体细节可以自己再调节。
Savalone
2022/06/01
2.7K0
Vue 2.0实现一个多选下拉框效果
要在上述代码中添加一个确认按钮,用于提交用户选择的选项,你可以按照以下步骤进行修改:
王小婷
2023/10/05
1.5K0
Vue 2.0实现一个多选下拉框效果
jQuery实现元素的鼠标移入移出及点击显示隐藏(微信二维码)
怎么来实现它呢?我们首先写一个简单的页面,实现鼠标移入移除或者点击显示隐藏效果。
德顺
2019/11/13
3.8K0
jQuery实现元素的鼠标移入移出及点击显示隐藏(微信二维码)
python测试开发django-164.bootstrap-table 单元格添加select下拉框
接着前一篇https://www.cnblogs.com/yoyoketang/p/15478790.html,实现单元格添加select下拉框。
上海-悠悠
2021/11/16
5840
Ajax-数据异步交互1.Ajax简介2.AJAX 实例
AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
Python攻城狮
2018/08/23
1.8K0
Ajax-数据异步交互1.Ajax简介2.AJAX 实例
jQuery
jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript 编程。它的宗旨就是:Write less,do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,J
新人小试
2018/04/12
4.7K0
杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)
D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比
杨校
2018/12/06
8.3K0
ztree实现左边动态生成树,右边为具体信息功能
页面原型图: 图片.png 功能需求:点击左边树上的子节点,像后台发送请求,将请求到的信息展示在右边的表单里面 前端代码实现: 引入css文档: <link rel="stylesheet" type
王小婷
2018/06/04
3.4K0
Vue 2.0关于多选下拉框数据渲染的问题
1:在组件的data中添加一个名为workFences的数组属性,并将其初始值设为你提供的数据:
王小婷
2023/10/01
2770
Vue 2.0关于多选下拉框数据渲染的问题
下拉框、下拉控件之Select2。自动补全的使用
1、使用插件,首先要引入别人的插件了,你可以选择离线(无网络)或者在线引用的(如果有网络)。
别先生
2019/06/03
2.4K0
一个搜索条样式,包括select的美化
一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。 by youku <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
练小习
2017/12/29
8720
从零开始写项目第三篇【在线聊天和个人收藏夹】
在线聊天 在浏览网页的时候无意发现了弹幕这个玩意,于是我们简单去探究了一下弹幕其实是怎么产生的。 后来就接触到了“推送”这么一个概念,然后发现了goEasy这个服务商。 http://goeasy.io/cn/started goEasy能够将我们的数据实时进行推送,使用起来也是很方便的。 使用了goEasy以后,我们就可以实现实时推送了。那么就剩下弹幕是怎么弄的了。后来又去找到了JS的组件: http://yaseng.org/jquery.barrager.js/ 这个组件可以帮我们很方便地生成弹幕…
Java3y
2018/04/02
1.7K0
从零开始写项目第三篇【在线聊天和个人收藏夹】
day41_jQuery学习笔记_02
下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:
黑泽君
2018/10/11
3.9K0
学习js在线html(富文本)编辑器
你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤: 1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。 你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。 <iframe id="myEditer" width="100%" height="150px"></iframe> <script>myEditer.document.designMode = 'on';</scri
deepcc
2018/05/16
20K0
python_day15_前端_jQue
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
py3study
2020/01/13
6K0
vue3 实现 select 下拉选项
本人学生 🐶, 平时在外面没事接点小项目小赚一笔补贴生活费. 之前一直都是使用Vue2.x的版本做项目, 暑假刚刚学习了Vue3想着新项目就直接用Vue3上手. 效果展示 好了, 话不多说先给大佬们看看效果样式: 组件难点 因为下拉框可能会在某些情况下被挡住, 所以这里的下拉框被挂载到了body标签上, 并且下拉框中的选项往往是以<slot>插槽的形式编写, 这里就会困扰到很多小白, 搞不明白怎么样才能在 下拉框 与触发下拉按钮 之间关联响应式事件与数据. 组件的使用 <tk-select selec
玖柒的小窝
2021/10/22
4.8K0
vue3 实现 select 下拉选项
04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便
iginkgo18
2020/09/27
3.4K0
22.jQuery(实例)
1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c
zhang_derek
2018/04/11
1.7K0
相关推荐
用jQuery模拟select下拉框
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验