select2的输入可下拉(modal框)

阅读: 评论:0

select2的输入可下拉(modal框)

select2的输入可下拉(modal框)

html:

<div class="form-group col-md-6 spanBox"><span>顾客名字</span><input type="text" name="usename" id="cunameValue" val="" style="display: none;"/><select id="cusName"  data-placeholder="请输入顾客姓名" style="width:45%;" name="usename" class="form-control select2" onchange="getValue(this)"></select></div>

js:

$(function () {/在模态框中使用select2,这句话是必须的$.fn.modal.forceFocus = function () { }//初始化客户输入框searchUserName();
}//根据输入名称查询,必须在二个字符以上时才开始进行查询工作function searchUserName(){var mainInput = $('#cusName');pty();mainInput.select2({placeholder:'请选择',allowClear:true,ajax: {url:  CONSTANT_SETTING.DOMAIN + "/importantCustomer/queryInfoByName",dataType: 'json',type : 'get',delay: 250,cache: true,minimumInputLength : 2,//最小需要输入多少个字符才进行查询data: function (params) {return {customerName: , //输入框输入的值access_token: getAccessToken(),factoryId : selectedfactory};},processResults: function (res) {//返回的数据拼接显示在前端下拉框里var pojo = res.data;var result = [];if(res.success && pojo.length>0){for(var i =0;i<pojo.length;i++){var po = pojo[i];result.push({'id':po.id,'text':po.customername+"("+po.phonename+")"});}}return {results: result};}}});}

再根据查询出来的ID再查询信息然后再赋值其他标签中去:
(这步我老觉得一定有什么方法可以把上步已经查询出来的实体类信息在这里复用。求各位大神指点?欢迎下方评论指点,我会实时关注,谢谢!)

function getValue(t){var id = t.value;$.ajax({type : 'get',url :  CONSTANT_SETTING.DOMAIN + "/importantCustomer/queryInfoById",dataType : 'json',async: false,data : {id : id,access_token: getAccessToken()},success : function(res){if(res.success){var pojo = res.data.bcm;$('#cusName').next().find('span').find('span').text(pojo.customername);$('#cunameValue').val(pojo.customername);$('#cusPhone').val(pojo.phonename);$('#cusRank').val(pojo.joblevel);$('#cusHobby').val(pojo.hobby);$('#marketType').val(pojo.belongmarket);$('#companyType').val(pojo.belongcompany);$('#userBirth').val(pojo.birthday);$('#birthHabit').val(pojo.borthdayhabit);$('#familyMber').val(pojo.homemate);$('#userTaboo').val(pojo.selftaboo);}else{}} });}

效果图:

选择以后会自动把后面的电话隐藏掉

本文发布于:2024-01-28 06:42:55,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17063953805538.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:modal
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23