select2修改下拉框列表的内容,修改选中的内容

1.需求:需要在下拉框列表中同时展示名称和id,将其两个字段进行拼接即可,但选中的展示内容不要id只要展示名称;

2.思路:展示时进行拼接,选中时强制改变选中内容即可;

3.实现

3.1代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .fl{ float: left; } .ml15{ margin-left: 15px; }
		</style>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="clearfix">			
			<div class="fl">
				<select class="js-data-example-ajax" style="width: 929px;"></select>
			</div>
			<div class="fl ml15" id="myid" style="display: none;">我的id是:</div>			
		</div>		
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
		<script type="text/javascript">
			//select框联想		
			/**
			 * placeholder:初始默认的填充内容
			 * minimumInputLength:开始搜索所需的最少字符数
			 * **/
			$(".js-data-example-ajax").select2({
				placeholder: 'Search for a repository',
				minimumInputLength: 1,
				ajax: {
					delay: 250,
					url:'https://api.github.com/search/repositories',
					dataType: 'json',
					data: function(params) {
						/**
						 * 这里为需要传入的参数,return一个对象(q和接口的keyword同名)
						 * params.term即为输入的关键词
						 * **/
						var condition = {};
						if(params.term){
							condition.q = params.term;
							return condition;
						}
					},
					processResults: function(res) {
						var result = [];
						var items = [];
						if(res.items) {
							items = res.items;
						}						
						/**
						 * 可以在这里把后台返回的数据处理一下,把选中后需要用的数据参数在这里存储一下
						 * **/
						if(items) {
							for(var i = 0; i < items.length; i++) {
								var itemObj = {};
 
								itemObj.prjinfo = {
									"avatar_url": items[i].owner.avatar_url,
									"full_name": items[i].full_name,
									"description": items[i].description,
									"forks_count": items[i].forks_count,
									"stargazers_count": items[i].stargazers_count,
									"watchers_count": items[i].watchers_count,
									"id": items[i].id
								};
								/**
								 * 这里的text就是选中后在选择框中展示的内容
								 * **/
								itemObj.id = items[i].id;
								//此处是选择框的列表部分,拼接进需要特别展示的字段
								itemObj.text = items[i].full_name+"(我是id:"+items[i].id+")";
								result.push(itemObj);
							}
						}
						/**
						 * 这里return的格式必须以results为键值的对象
						 * **/
						return { results: result };
					}
				},
 
			});
			
			/**
			 * 这里是选中的事件处理函数,可以打印出选中列的参数(前提在processResults时储存并return了,否则无法拿到)
			 * **/
			$(".js-data-example-ajax").on("select2:select", function(e) {
				var prjinfo = e.params.data.prjinfo;
				
				//当选中之后强制改变,select选择框的内容
				$('.js-data-example-ajax').html('<option value="' + prjinfo.full_name + '">' + prjinfo.full_name + '</option>').trigger("change");
				
				$("#myid").html("我的id是:"+prjinfo.id);
				$("#myid").show();
				
				console.log("prjinfo:",prjinfo)
			});
		</script>
	</body>
</html>

3.2效果

《select2修改下拉框列表的内容,修改选中的内容》

3.3注解

《select2修改下拉框列表的内容,修改选中的内容》

    原文作者:hangGe0111
    原文地址: https://blog.csdn.net/hangGe0111/article/details/87348756
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞