Select2 - 当选择其中之一时，选择 2 的多个输入共享相同的选项 - BUGG

发布于 2025-01-10 09:26:23 字数 1205 浏览 1 评论 0原文

我在 Select2 库中遇到了一个奇怪的问题。我添加了一些选择的 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 声明中的某些内容吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等数载，海棠开 2025-01-17 09:26:23

您能分享一下您生成的 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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
            });

Can you share your generated HTML code please ? Because I can't analyze from your razor codes

Check this example it's working fine

Js Fiddle Example

<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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
            });

回复收藏 0 原文

~没有更多了~