Bootstrap 2.3.2-更改时将填充JQuery国家/州

Question

我正在使用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 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();
    }

而且我有一个简单的选择标签来附加结果：

<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>

在更改后从控制台（请注意引导程序集样式=“ 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");
                });
    });
});