Select2 - multiple inputs with select 2 shares the same options when one of them is selected - BUGG
Question
I am facing a strange problem with the Select2 library. I have added a few select html elements with different options specified for each tag. Each select is decorated with:
<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
});
Everything works like a charm to the moment when I select an option from the dropdown. When the option from the first select is selected and I move to the second select, then the second select's dropdown contains options from the first select list. Those options are separated in the html file. Did I miss something in the jQuery declaration?
1 answers
solution1
0 2022-02-25 09:23:01
Can you share your generated HTML code please? Because I can't analyze from your razor codes
Check this example it's working fine
<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 File
$('#selectClient').select2({
placeholder: 'Client',
allowClear: true
});
$('#selectProduct').select2({
placeholder: 'Client',
allowClear: true
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.