Select2搭配<section>标签失效及选项无法交叉选择问题咨询

我来帮你逐一搞定这两个头疼的问题：

一、和

标签搭配无法正常工作的问题 #

Select2本质上是给表单控件做增强的组件，它只能绑定在<select>、<input>这类表单元素上，而<section>是用来划分页面结构的块级元素，根本不是表单控件，你直接给<section>加.tmp类然后初始化Select2，肯定跑不起来。

解决办法很简单：

• 把.tmp类加到<select>元素上，用<section>包裹这个select完全没问题，比如HTML结构改成这样：

  <section>
    <select class="tmp"></select>
  </section>
  

• 再执行你那串初始化代码，Select2就能正常挂载到正确的元素上了。

二、选项选择异常的问题 #

你说的“选中ID1后没法选ID2，但选ID3后能反向选2和1”这个现象，大概率和第一个问题有关——如果你错误地把Select2初始化在了<section>上，组件内部的状态管理会彻底混乱，就会出现这种诡异的选择问题。

除此之外，也可以从这几个方向再排查：

• 检查页面里有没有多个带.tmp类的元素：如果有多个元素匹配$(".tmp")，Select2会一次性初始化所有匹配项，很容易互相干扰。建议用更精准的选择器，比如给select加个id，用$("#my-select")来初始化。
• 确认Select2资源引入完整：你贴的引入代码里https://cdnjs.cloudfl...没写完，一定要把Select2的CSS和JS都引全，比如：

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  

• 试试把数据ID改成字符串：虽然数字ID理论上没问题，但有些旧版本的Select2对数字ID的处理有小bug，你可以把数据里的id: 1改成id: "1"，测试下能不能解决。

把HTML结构和初始化逻辑修正后，再测试选择功能，应该就能恢复正常了。

内容的提问来源于stack exchange，提问作者Woifgang