Select2-当选择其中一个时,带有Select2的多个输入共享相同的选项-BUGG



Select2库出现了一个奇怪的问题。我添加了一些select html元素,为每个标记指定了不同的选项。每个选择都装饰有:

<select id="selectClient">
<option selected disabled="true">Client</option>
@foreach (var client in Model.Clients)
{
<option>@Html.DisplayFor(modelItem => client.ClientDisplayName)</option>
}
</select>
<select name="SelectedProduct" id="selectProduct">
<option selected disabled="true">Produkt</option>
@foreach (var product in Model.Products)
{
<option>@Html.DisplayFor(modelItem => product.ProductDisplayName)</option>
}
</select>
jQuery('#selectClient').select2({
placeholder: 'Client',
allowClear: true
});
jQuery('#selectProduct').select2({
placeholder: 'Client',
allowClear: true
});

当我从下拉列表中选择一个选项时,一切都像一种魅力。当第一个选择中的选项被选中并且我移动到第二个选择时,第二个选项的下拉列表包含第一个选择列表中的选项。这些选项在html文件中是分开的。我是否遗漏了jQuery声明中的某些内容?

您能分享您生成的HTML代码吗?因为我无法从你的剃须刀代码中分析

看看这个例子,它运行良好

Js Fiddle示例

<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select id="selectClient" style="width:200px">
<option selected disabled="true">Client</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select name="SelectedProduct" style="width:200px" id="selectProduct">
<option selected disabled="true">Produkt</option>
<option value="1">Option 4</option>
<option value="2">Option 5</option>
<option value="3">Option 6</option>
</select>
</body>
</html>

Js文件

$('#selectClient').select2({
placeholder: 'Client',
allowClear: true
});
$('#selectProduct').select2({
placeholder: 'Client',
allowClear: true
});

最新更新