Bootstrap 2.3.2 - JQuery Country/State 在更改时填充

Question

我正在开发 Jooomla 3 中的一个组件，我想坚持使用 Bootstrap 的系统版本，以使其看起来尽可能完整...所以我不是在寻找答案说要升级到 BS 3 或 4。这也与 Joomla 没有直接关系，所以我不会在那里发布。

国家/地区的 select 下拉菜单有一个更改事件填充可用状态。从技术上讲，它确实有效，但状态下拉列表实际上并没有正确显示，我只能看到浏览器控制台元素，但列表并没有直观地显示出来。如果我通过使用 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 tools.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>

Answer 1

我明白了。 Joomla 使用旧版本的 jQuery 插件 Chosen，需要 liszt:updated

我在下面所做的唯一更改：

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");
                });
    });
});

Bootstrap 2.3.2 - JQuery Country/State 在更改时填充

Bootstrap 2.3.2 - JQuery Country/State populate on change

php

jquery

joomla