select2动态填充数据（option普通版），初始赋值

最新推荐文章于 2021-03-21 03:30:42 发布

原创

最新推荐文章于 2021-03-21 03:30:42 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select2 #动态填充数据 #普通版（文字的option）

本文介绍如何使用Select2库进行动态数据填充，重点在于处理仅包含文字的option元素。通过官方文档和配置选项，可以实现初始化赋值功能。详细步骤包括代码实现、效果展示和操作说明。

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

1.代码(普通版)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
	</head>
	<body>
		<select class="js-data-example-ajax" style="width: 929px;"></select>
		<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',