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触发模糊查询获取后台数据库中的数据,然后动态绑定到下拉框中 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |