当存在多个选择框时，jquery select2选项冲突

Question

好的，

我不知道如何正确描述问题。

这是一个很奇怪的问题。

我有两个选择框。一个供国家选择。另一个适用于城市。

现在当我同时使用 select2 时。我从第二个选择框中包含的第一个选择框中找到选项。

HTML 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

我的 Javascript 代码：

$(document).ready(function() {
        $("select[name=country]").select2({theme: "classic"});
        $("select[name=city]").select2({theme: "classic"});
    });

更新

选择框的代码要澄清：

              <select name="country" class="country form-control" style="width:12%;border:1px solid rgb(169, 169, 169);direction:ltr;">
                        <option value="" selected>Choose country</option>
                        <?php if (isset($countryRow) && !empty($countryRow)) { ?>
                        <option value="<?php echo $countryRow['cou_name']; ?>" data-value="<?php echo $countryRow['cou_code']; ?>" id="<?php echo $countryRow['cou_id']; ?>"><?php echo $countryRow['cou_name'] . " ( " . $countryRow['cou_code'] . " ) "; ?></option><?php } else { ?>
                    <?php
                        foreach ($countryArray as $i => $cA) {
                            echo "<option id='" . $cA['cou_id'] . "' data-value='" . $cA['cou_code'] . "' value='" . $cA['cou_name'] . "'>" . $cA['cou_name'] . " ( " . $cA['cou_code'] . " ) </option>";
                        } 
                    }
                    ?>
              </select>
              <div class="input-hidden" style="display:none;"><input type='hidden' name='con_code' value='' /></div>
              <script>$(document).ready(function () {
                $("[name='country']").on("change", function () {
                    "use strict";
                    var countryCode = $("[name='country'] option:selected").attr("data-value"),       
                        htmlCode = "<input type='hidden' name='con_code' value='" + countryCode + "' />";
                    $("#phone").val(countryCode);
                    $(".input-hidden").html(htmlCode);
                }); });
              </script>
              <select name="city" class="form-control" style="width:15%;border:1px solid rgb(169, 169, 169);direction:ltr;">
                    <option value="" class="standardOption" selected>Choose country first</option>
                    <script>$(document).ready(function () {
                        $("[name='country']").on("change", function () {
                            "use strict";
                            if ($("[name='country'] option:selected").val() !== "") { 
                                var countryID = $("[name='country'] option:selected").attr("id");
                                 $.ajax({
                                    url: 'ajax.php',
                                    type: 'POST',
                                    data: {option : countryID},
                                    success: function(data) {
                                        $("[name='city']").html(data);
                                    }
                                });
                            } else {
                                $("[name='city']").html('<option value="" class="standardOption" selected>Choose country first</option>');
                            }
                        }); });
                    </script>
              </select>

提前致谢

Answer 1

终于解决了。

那个冲突是由 ajax 引起的。

解决方案就是为每个select2() 添加containerCssClass: "customClass"。

Answer 2

$(document).ready(function() {
		$('.js-example-basic-single').select2();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script></script>
<select name="country" class="js-example-basic-single" style="width:100px;">
        <option value="0">USA</option>
        <option value="1">UK</option>
        <option value="2">India</option>
</select>
<select name="city" class="js-example-basic-single" style="width:100px;">
        <option value="0">Dallas</option>
        <option value="1">London</option>
        <option value="2">New York</option>
</select>

您可以为所有选择指定一个通用类名，然后将“select2”应用于该类名，而不是在选择名称（即国家和城市）上声明“select2”。它将在其特定的选择框中显示选项。