Bootstrap 2.3.2 - jQuery страна/штат заполняется при изменении

Bootstrap 2.3.2 - jQuery страна/штат заполняется при изменении

02.12.2019 09:35:01 Просмотров 13 Источник

Я работаю над компонентом в Jooomla 3,и я хочу придерживаться системной версии Bootstrap, чтобы сохранить его как можно более интегрированным... поэтому я не ищу ответов, говорящих о том, чтобы перейти на BS 3 или 4. Это также не имеет прямого отношения к Joomla, поэтому я не буду публиковать его там.

В раскрывающемся списке выбор страны есть событие изменения, заполняющее доступные состояния. Технически это действительно работает, но выпадающее состояние на самом деле не отображается правильно, я могу видеть только элементы консоли браузера, но список не отображается визуально. Если я делаю это с помощью div ID и создаю весь элемент select, то он работает, но я чувствую, что мне просто не хватает чего-то в том, как я должен обрабатывать заполнение.

Вот мой JQuery:

$("select#registrant_country").change(function () {
        var selectedCountry = $("#registrant_country option:selected").val();
        $('#registrant_state').empty();
        $.getJSON("index.php?option=com_mycomponent&task=tools.countryState",
                {id: selectedCountry,
                    tmpl: "component"
                })
                .done(function (data) {
                    $.each(data, (val) => {
                        $("#registrant_state").append("<option value='" + val +"'>" + val + "</option>");
                    });
                });
    });

Вот инструменты PHP.метод countryState:

public function countryState() {
        JFactory::getDocument()->setMimeEncoding('application/json');
        JResponse::setHeader('Content-Disposition', 'attachment;filename="state-results.json"');
        $app = JFactory::getApplication();
        $country = $app->input->get('id', '', 'string');

        MysiteHelper::add('country-code', $country); //adds "country-code=US" to the query
        $result = MysiteHelper::getData('country/state-list.json'); // becomes https://API_PATH/country/state-list.json&country=US
        echo json_encode($result);
        jexit();
    }

И у меня есть простой тег select для добавления результатов:

<label>State</label><select id="registrant_state"></select>

Из консоли, перед сменой:

<select id="registrant_state" style="display: none;"></select><div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="registrant_state_chzn"><a class="chzn-single chzn-default"><span>Select an option</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chzn-results"></ul></div></div>

Из консоли после изменения (обратите внимание на Bootstrap set style= " display: none;"):

<label>State</label>
<select id="registrant_state" style="display: none;">
<option value="Navassa Island">Navassa Island</option>
<option value="Howland Island">Howland Island</option>
<option value="Kingman Reef">Kingman Reef</option>
<option value="Jarvis Island">Jarvis Island</option>
<option value="Johnston Atoll">Johnston Atoll</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Wake Ialand">Wake Ialand</option>
<option value="Palmyra Atoll">Palmyra Atoll</option>
<option value="Baker Island">Baker Island</option></select>
<div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="registrant_state_chzn">
    <a class="chzn-single chzn-default"><span>Select an option</span><div><b></b></div></a>
    <div class="chzn-drop">
        <div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div>
        <ul class="chzn-results"></ul>
    </div>
</div>
У вопроса есть решение - Посмотреть?

Ответы - Bootstrap 2.3.2 - jQuery страна/штат заполняется при изменении / Bootstrap 2.3.2 - JQuery Country/State populate on change

Является ответом!
James Shaver

02.12.2019 08:15:56

Я уже все понял. Joomla использует старую версию выбранного плагина jQuery и нуждается в обновлении liszt:

Единственные изменения, которые я сделал ниже:

jQuery(function ($) {
    $("select#registrant_country").change(function () {
        var selectedCountry = $("#registrant_country option:selected").val();
        $('select#registrant_state').empty();
        $.getJSON("index.php?option=com_mycomponent&task=tools.countryState",
                {id: selectedCountry,
                    tmpl: "component"
                })
                .done(function (data) {
                $('select#registrant_state').empty();
                    $.each(data, (val) => {
                        $('select#registrant_state').append("<option value='" + val + "'>" + val + "</option>");
                      });
                $('select#registrant_state').trigger("liszt:updated");
                });
    });
});
Закрыть X