select2 单个 select 盒子多个不工作

Question

这里我在一个函数中使用 select 选项可以吗？这里我不只是使用 4 select 个选项，它可以是 10 个或无限个，最好的方法是什么？

我的代码：

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

<select id="selectss" style="width: 100%;">
    <option value="1">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
</select>
<br><br><br>
<select id="selectss" style="width: 100%;">
    <option value="1">04</option>
    <option value="2">05</option>
    <option value="3">06</option>
</select>
<br><br><br>
<select id="selectss" style="width: 100%;">
    <option value="1">07</option>
    <option value="2">08</option>
    <option value="3">09</option>
</select>
<br><br><br>
<select id="selectss" style="width: 100%;">
    <option value="1">Test</option>
    <option value="2">Test</option>
    <option value="3">Test</option>
</select>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
       $("#selectss").select2();
    });
</script>

之前我使用了下面的代码，但这不是最好的方法，因为它必须更改 select 选项中的所有 ID：

<script>
    $(document).ready(function() {
        $("#selectss1, #selectss2, #selectss3, #selectss3, #selectss4").select2();
    });
</script>

Answer 1

请使用此方法。

$(".selectss").select2();

请将 id 更改为 class。这会将 select2 添加到所有 class 包含“selectss”的元素。你不应该有重复的 ID

select2 单个 select 盒子多个不工作

select2 single select boxes multiple not working

javascript

html

jquery

jquery-select2