Jquery select2 опции конфликтуют, когда существует более одного поля выбора - PullRequest
Новая
       7

Jquery select2 опции конфликтуют, когда существует более одного поля выбора

0 голосов
/ 06 февраля 2019

Хорошо,

Я не знаю, как правильно описать проблему.

Это очень странная проблема.

У меня есть два поля выбора.Один для стран выбрать.И еще один для городов.

Теперь, когда я использую 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>

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Наконец решено.

Этот конфликт был вызван ajax.

Решением было просто добавить containerCssClass: "customClass" для каждого select2().

0 голосов
/ 06 февраля 2019 

$(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» в именах выбора, например, страну и город, вы можете дать общее имя класса всем select, а затем применить к нему «select2»имя классаЭто отобразит параметры в их конкретном окне выбора.

...