Select2 用法小贴士

最新推荐文章于 2025-02-12 12:04:29 发布

Smallc0de

最新推荐文章于 2025-02-12 12:04:29 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

分类专栏：前端疑难杂症

本文链接：https://blog.youkuaiyun.com/Smallc0de/article/details/99718304

前端疑难杂症专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Select2控件的初始化配置、动态赋值方法、解决输入焦点问题及值的获取方式，涵盖Ajax动态加载选项、启用函数设置、解决输入框无法获取焦点等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用于Select2 4.0.8

初始化：
标签

<div class="form-group col-md-6">
<select id="select2_id" class="form-control" name="select2_name">
</select>
</div>

ajax动态赋值

$.ajax({
		url:rootPath + "/project/select2_ids",
		type:"GET",
		success:function(result){
			//console.log(result);
			if(200==result.code){
				$.each(result.extend.select2_ids, function(index, item) { //select2_id为数组
					var option = $("<option></option>")
							.append(item.engineerItCode).attr("value", item.id);
					option.appendTo(ele);
				});
			}else{
				alert_message(result.code);
			}
		}
	});

启用函数

$("#select2_id").select2({
			placeholder : "Select a domain",
			allowClear : true
		});

动态赋值1

$("#select2_id").val(result.value).select2();
$("#select2_id").val("").select2();

动态赋值2
这里val()中的“[ ]”可以一定程度上保证及时更新

$("#select2_id").val([result.extend.query_result.project]).trigger("change");

解决select2的input框无法获取焦点，无法输入的问题
重写enforceFocus方法，在script中加入下面语句即可：

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

select2使用模态框，搜索框无法输入
bootstrap的modal框中会自带一个属性tabindex="-1"
此属性作用是“设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。”
通过把tabindex设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动。如果有两个控件的tabIndex属性相同，则以控件在html代码中出现的顺序为准。默认的tabIndex属性为 0 ，将排列在在所有指定tabIndex的控件之后。而若把tabIndex属性设为一个负值（如tabIndex="-1"），那么这个链接将被排除在TAB键的序列之外，光标也因此无法锚定在输入框中。

<div class="modal fade" id="add_task_modal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

将上面代码中的tabindex="-1"删掉即可

获取Select2控件上的值

	$("#inpt_pjnm_selector").select2('data');
	$("#inpt_pjnm_selector").select2('val');
	$("#inpt_pjnm_selector").val();
	$("#inpt_pjnm_selector option:checked").text();
	$("#inpt_pjnm_selector option:checked").val();