加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 03:04:43 所属栏目:百科 来源:网络整理
导读:!--前端样式--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-a
<!--前端样式-->
<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触发模糊查询获取后台数据库中的数据,然后动态绑定到下拉框中

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读