select2动态填充数据（豪华VIP自定义option）

最新推荐文章于 2025-05-30 11:47:20 发布
原创
最新推荐文章于 2025-05-30 11:47:20 发布 · 2.5k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#select2 #动态添加 #自定义option内容 #联想
本文介绍如何利用Select2库实现动态填充数据，包括从远程源获取选项并自定义每个option的内容。详细代码及效果展示，适用于需要联想搜索功能的下拉选择框。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
1.代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>select2</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
		<style type="text/css">
			@import url(//fonts.googleapis.com/css?family=Montserrat:400|Muli:300,400|Inconsolata);*,*::before,*::after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@-webkit-viewport{width:device-width}@-moz-viewport{width:device-width}@-ms-viewport{width:device-width}@-o-viewport{width:device-width}@viewport{width:device-width}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent;text-decoration:none}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#FFFF27;color:#333}sub,sup{font-size:.8rem;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;max-width:100%}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0}pre{overflow:auto}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}tr,td,th{vertical-align:middle}th,td{padding:.425rem 0}th{text-align:left}.container{width:75em;margin:0 auto;padding:0}@media only all and (min-width:60em) and (max-width:74.938em){.container{width:60em}}@media only all and (min-width:48em) and (max-width:59.938em){.container{width:48em}}@media only all and (min-width:30.063em) and (max-width:47.938em){.container{width:30em}}@media only all and (max-width:30em){.container{width:100%}}.grid{display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row;-moz-flex-flow:row;flex-flow:row;list-style:none;margin:0;padding:0}@media only all and (max-width:47.938em){.grid{-webkit-flex-flow:row wrap;-moz-flex-flow:row wrap;flex-flow:row wrap}}.block{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;min-width:0;min-height:0}@media only all and (max-width:47.938em){.block{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 100%;-moz-flex:0 100%;-ms-flex:0 100%;flex:0 100%}}.content{margin:.625rem;padding:.938rem}@media only all and (max-width:47.938em){body [class*="size-"]{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 100%;-moz-flex:0 100%;-ms-flex:0 100%;flex:0 100%}}.size-1-2{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 50%;-moz-flex:0 50%;-ms-flex:0 50%;flex:0 50%}.size-1-3{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 33.33333%;-moz-flex:0 33.33333%;-ms-flex:0 33.33333%;flex:0 33.33333%}.size-1-4{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 25%;-moz-flex:0 25%;-ms-flex:0 25%;flex:0 25%}.size-1-5{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 20%;-moz-flex:0 20%;-ms-flex:0 20%;flex:0 20%}.size-1-6{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 16.66667%;-moz-flex:0 16.66667%;-ms-flex:0 16.66667%;flex:0 16.66667%}.size-1-7{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 14.28571%;-moz-flex:0 14.28571%;-ms-flex:0 14.28571%;flex:0 14.28571%}.size-1-8{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 12.5%;-moz-flex:0 12.5%;-ms-flex:0 12.5%;flex:0 12.5%}.size-1-9{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 11.11111%;-moz-flex:0 11.11111%;-ms-flex:0 11.11111%;flex:0 11.11111%}.size-1-10{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 10%;-moz-flex:0 10%;-ms-flex:0 10%;flex:0 10%}.size-1-11{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 9.09091%;-moz-flex:0 9.09091%;-ms-flex:0 9.09091%;flex:0 9.09091%}.size-1-12{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 8.33333%;-moz-flex:0 8.33333%;-ms-flex:0 8.33333%;flex:0 8.33333%}@media only all and (min-width:48em) and (max-width:59.938em){.size-tablet-1-2{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 50%;-moz-flex:0 50%;-ms-flex:0 50%;flex:0 50%}.size-tablet-1-3{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 33.33333%;-moz-flex:0 33.33333%;-ms-flex:0 33.33333%;flex:0 33.33333%}.size-tablet-1-4{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 25%;-moz-flex:0 25%;-ms-flex:0 25%;flex:0 25%}.size-tablet-1-5{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 20%;-moz-flex:0 20%;-ms-flex:0 20%;flex:0 20%}.size-tablet-1-6{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 16.66667%;-moz-flex:0 16.66667%;-ms-flex:0 16.66667%;flex:0 16.66667%}.size-tablet-1-7{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 14.28571%;-moz-flex:0 14.28571%;-ms-flex:0 14.28571%;flex:0 14.28571%}.size-tablet-1-8{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 12.5%;-moz-flex:0 12.5%;-ms-flex:0 12.5%;flex:0 12.5%}.size-tablet-1-9{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 11.11111%;-moz-flex:0 11.11111%;-ms-flex:0 11.11111%;flex:0 11.11111%}.size-tablet-1-10{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 10%;-moz-flex:0 10%;-ms-flex:0 10%;flex:0 10%}.size-tablet-1-11{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 9.09091%;-moz-flex:0 9.09091%;-ms-flex:0 9.09091%;flex:0 9.09091%}.size-tablet-1-12{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 8.33333%;-moz-flex:0 8.33333%;-ms-flex:0 8.33333%;flex:0 8.33333%}}@media only all and (max-width:47.938em){@supports not (flex-wrap:wrap){.grid{display:block;-webkit-box-lines:inherit;-moz-box-lines:inherit;box-lines:inherit;-webkit-flex-wrap:inherit;-moz-flex-wrap:inherit;-ms-flex-wrap:inherit;flex-wrap:inherit}.block{display:block;-webkit-box-flex:inherit;-moz-box-flex:inherit;box-flex:inherit;-webkit-flex:inherit;-moz-flex:inherit;-ms-flex:inherit;flex:inherit}}}.first-block{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-block{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.fixed-blocks{-webkit-flex-flow:row wrap;-moz-flex-flow:row wrap;flex-flow:row wrap}.fixed-blocks .block{-webkit-box-flex:inherit;-moz-box-flex:inherit;box-flex:inherit;-webkit-flex:inherit;-moz-flex:inherit;-ms-flex:inherit;flex:inherit;width:25%}@media only all and (min-width:60em) and (max-width:74.938em){.fixed-blocks .block{width:33.33333%}}@media only all and (min-width:48em) and (max-width:59.938em){.fixed-blocks .block{width:50%}}@media only all and (max-width:47.938em){.fixed-blocks .block{width:100%}}body{font-size:1.05rem;line-height:1.7}h1,h2,h3,h4,h5,h6{margin:.85rem 0 1.7rem 0;text-rendering:optimizeLegibility}h1{font-size:3.25rem}h2{font-size:2.55rem}h3{font-size:2.15rem}h4{font-size:1.8rem}h5{font-size:1.4rem}h6{font-size:.9rem}p{margin:1.7rem 0}ul,ol{margin-top:1.7rem;margin-bottom:1.7rem}ul ul,ul ol,ol ul,ol ol{margin-top:0;margin-bottom:0}blockquote{margin:1.7rem 0;padding-left:.85rem}cite{display:block;font-size:.925rem}cite:before{content:"\2014 \0020"}pre{margin:1.7rem 0;padding:.938rem}code{vertical-align:bottom}small{font-size:.925rem}hr{border-left:none;border-right:none;border-top:none;margin:1.7rem 0}fieldset{border:0;padding:.938rem;margin:0 0 1.7rem 0}input,label,select{display:block}label{margin-bottom:.425rem}label.required:after{content:"*"}label abbr{display:none}textarea,input[type="email"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="text"],input[type="url"],input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="month"],input[type="time"],input[type="week"],select[multiple=multiple]{-webkit-transition:border-color;-moz-transition:border-color;transition:border-color;border-radius:.1875rem;margin-bottom:.85rem;padding:.425rem .425rem;width:100%}textarea:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="text"]:focus,input[type="url"]:focus,input[type="color"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,select[multiple=multiple]:focus{outline:none}textarea{resize:vertical}input[type="checkbox"],input[type="radio"]{display:inline;margin-right:.425rem}input[type="file"]{width:100%}select{width:auto;max-width:100%;margin-bottom:1.7rem}button,input[type="submit"]{cursor:pointer;user-select:none;vertical-align:middle;white-space:nowrap;border:inherit}@charset "UTF-8";#top-github-link,#body #breadcrumbs{position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.button,.button-secondary{display:inline-block;padding:7px 12px}.button:active,.button-secondary:active{margin:2px 0 -2px 0}body{background:#fff;color:#555;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:#1694CA}a:hover{color:#0e6185}pre{position:relative}.bg{background:#fff;border:1px solid #eaeaea}b,strong,label,th{font-weight:600}.default-animation,#header #logo-svg,#header #logo-svg path,#sidebar,#sidebar ul,#body,#body .padding,#body .nav{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease}fieldset{border:1px solid #ddd}textarea,input[type="email"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="text"],input[type="url"],input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="month"],input[type="time"],input[type="week"],select[multiple=multiple]{background-color:white;border:1px solid #ddd;box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}textarea:hover,input[type="email"]:hover,input[type="number"]:hover,input[type="password"]:hover,input[type="search"]:hover,input[type="tel"]:hover,input[type="text"]:hover,input[type="url"]:hover,input[type="color"]:hover,input[type="date"]:hover,input[type="datetime"]:hover,input[type="datetime-local"]:hover,input[type="month"]:hover,input[type="time"]:hover,input[type="week"]:hover,select[multiple=multiple]:hover{border-color:#c4c4c4}textarea:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="text"]:focus,input[type="url"]:focus,input[type="color"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,select[multiple=multiple]:focus{border-color:#1694CA;box-shadow:inset 0 1px 3px rgba(0,0,0,.06),0 0 5px rgba(19,131,179,.7)}#header{background:#1694CA;color:#fff;text-align:center;padding:1rem}#header a{display:inline-block}#header #logo-svg{width:8rem;height:2rem}#header #logo-svg path{fill:#fff}.searchbox{margin-top:.5rem;position:relative;border:1px solid #19a5e1;background:#1383b3;border-radius:4px}.searchbox label{color:rgba(255,255,255,.8);position:absolute;left:10px;top:3px}.searchbox span{color:rgba(255,255,255,.6);position:absolute;right:10px;top:3px;cursor:pointer}.searchbox span:hover{color:rgba(255,255,255,.9)}.searchbox input{display:inline-block;color:#fff;width:100%;height:30px;background:transparent;border:0;padding:0 25px 0 30px;margin:0;font-weight:400}.searchbox input::-webkit-input-placeholder{color:rgba(255,255,255,.6)}.searchbox input::-moz-placeholder{color:rgba(255,255,255,.6)}.searchbox input:-moz-placeholder{color:rgba(255,255,255,.6)}.searchbox input:-ms-input-placeholder{color:rgba(255,255,255,.6)}#sidebar-toggle{display:none}@media only all and (max-width:47.938em){#sidebar-toggle{display:inline-block}}#sidebar{background-color:#38424D;position:fixed;top:0;width:300px;bottom:0;left:0;font-weight:500;font-size:15px}#sidebar a{color:#bbb}#sidebar a:hover{color:#d5d5d5}#sidebar a.subtitle{color:rgba(187,187,187,.6)}#sidebar hr{border-bottom:1px solid #323a44}#sidebar a.padding{padding:0 1rem}#sidebar h5{margin:2rem 0 0;position:relative;line-height:2}#sidebar h5 a{display:block;margin-left:0;margin-right:0;padding-left:1rem;padding-right:1rem}#sidebar h5 i{color:rgba(187,187,187,.6);position:absolute;right:.6rem;top:.7rem;font-size:80%}#sidebar h5.parent a{background:#293038;color:#c8c8c8!important}#sidebar h5.active a{background:#fff;color:#555!important}#sidebar h5.active i{color:#555!important}#sidebar h5+ul.topics{display:none;margin-top:0}#sidebar h5.parent+ul.topics,#sidebar h5.active+ul.topics{display:block}#sidebar ul{list-style:none;padding:0;margin:0}#sidebar ul.searched a{color:#888}#sidebar ul.searched .search-match a{color:#d5d5d5}#sidebar ul.searched .search-match a:hover{color:#eee}#sidebar ul.topics{margin:0 1rem}#sidebar ul.topics.searched ul{display:block}#sidebar ul.topics ul{display:none;padding-bottom:1rem}#sidebar ul.topics ul ul{padding-bottom:0}#sidebar ul.topics li.parent ul,#sidebar ul.topics>li.active ul{display:block}#sidebar ul.topics>li>a{line-height:2rem;font-size:1.1rem}#sidebar ul.topics>li>a b{opacity:.5;font-weight:400}#sidebar ul.topics>li>a .fa{margin-top:9px}#sidebar ul.topics>li.parent,#sidebar ul.topics>li.active{background:#2d353e;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}#sidebar ul li.active>a{background:#fff;color:#555!important;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}#sidebar ul li{padding:0}#sidebar ul li.visited+span{margin-right:16px}#sidebar ul li a{display:block;padding:2px 0}#sidebar ul li a span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}#sidebar ul li>a{padding:4px 0}#sidebar ul li .fa{display:none;float:right;font-size:13px;min-width:16px;margin:4px 0 0 0;text-align:right}#sidebar ul li.visited>a .read-icon{color:#1694CA;display:inline}#sidebar ul li li{padding-left:1rem;text-indent:.2rem}#main{background:#f7f7f7;margin:0 0 1.563rem 0}#body{position:relative;margin-left:300px;min-height:100%}#body img,#body .video-container{margin:3rem auto;display:block;text-align:center}#body img.border,#body .video-container.border{border:2px solid #e6e6e6!important;padding:2px}#body img.shadow,#body .video-container.shadow{box-shadow:0 10px 30px rgba(0,0,0,.1)}#body .bordered{border:1px solid #ccc}#body .padding{padding:3rem 6rem}@media only all and (max-width:59.938em){#body .padding{position:static;padding:15px 3rem}}@media only all and (max-width:47.938em){#body .padding{padding:5px 1rem}}#body h1+hr{margin-top:-1.7rem;margin-bottom:3rem}@media only all and (max-width:59.938em){#body #navigation{position:static;margin-right:0!important;width:100%;display:table}}#body .nav{position:fixed;top:0;bottom:0;width:4rem;font-size:50px;height:100%;cursor:pointer;display:table;text-align:center}#body .nav>i{display:table-cell;vertical-align:middle;text-align:center}@media only all and (max-width:59.938em){#body .nav{display:table-cell;position:static;top:auto;width:50%;text-align:center;height:100px;line-height:100px;padding-top:0}#body .nav>i{display:inline-block}}#body .nav:hover{background:#F6F6F6}#body .nav.nav-pref{left:0}#body .nav.nav-next{right:0}#body-inner{margin-bottom:5rem}#chapter{display:flex;align-items:center;justify-content:center;height:100%;padding:2rem 0}#chapter #body-inner{padding-bottom:3rem;max-width:80%}#chapter h3{font-family:"Muli","Helvetica","Tahoma","Geneva","Arial",sans-serif;font-weight:400;text-align:center}#chapter h1{font-size:5rem;border-bottom:4px solid #F0F2F4}#chapter p{text-align:center;font-size:1.2rem}#footer{padding:3rem 1rem;color:#a2a2a2;font-size:13px}#footer p{margin:0}body{font-family:"Muli","Helvetica","Tahoma","Geneva","Arial",sans-serif;letter-spacing:-.03rem;font-weight:400}h1,h2,h3,h4,h5,h6{font-family:"Montserrat","Helvetica","Tahoma","Geneva","Arial",sans-serif;font-weight:400;text-rendering:optimizeLegibility;line-height:150%;letter-spacing:0}h1{text-align:center;letter-spacing:-3px}h2{letter-spacing:-2px}h3{letter-spacing:-1px}blockquote{border-left:10px solid #F0F2F4}blockquote p{font-size:1.1rem;color:#999}blockquote cite{display:block;text-align:right;color:#666;font-size:1.2rem}blockquote{position:relative}blockquote blockquote{position:static}blockquote>blockquote>blockquote{margin:0}blockquote>blockquote>blockquote p{padding:15px;display:block;font-size:1rem;margin-top:0rem;margin-bottom:0rem;color:#666}blockquote>blockquote>blockquote p:first-child:before{position:absolute;top:2px;color:#fff;font-family:FontAwesome;content:'';left:10px}blockquote>blockquote>blockquote p:first-child:after{position:absolute;top:2px;color:#fff;left:2rem;font-weight:700;content:'Info'}blockquote>blockquote>blockquote>p{margin-left:-71px;border-top:30px solid #F0B37E;background:#FFF2DB}blockquote>blockquote>blockquote>blockquote>p{margin-left:-94px;border-top:30px solid rgba(217,83,79,.8);background:#FAE2E2}blockquote>blockquote>blockquote>blockquote>p:first-child:after{content:'Warning'}blockquote>blockquote>blockquote>blockquo