使用 selectize.js 填充第二个下拉列表

Question

我有两个下拉列表，第一个下拉列表的选择正确填充第二个。我已经使用 ajax-php 成功实现了它。

现在我正在尝试使用selectize.js，应用于select（第一个下拉列表）中的第一个，它可以正常工作，但第二个下拉列表没有正确填充。我已经阅读了文档（这不是我读过的最好的），我认为默认情况下 selectize.js 无法处理元数据。

但是有一个addOption() 和一个addItem() 方法是我应该实现的。我的问题是我找不到解析ajax-php 给出的结果的方法（并存储为@987654325 @ 在第二个下拉列表中）并正确使用它们...

PHP 代码

echo "<select name='universities' id='universities' ></select>"; //Here is where the second dropdown is populated properly

JQuery 代码-更新第二个下拉菜单

//Successfully the second dropdown is populated before     
$("#universities").selectize();
//If i change the first dropdown option now,the second dropdown remains the same
//if i comment  $("#universities").selectize(); line everything works fine.

有什么想法吗？

Answer 1

试试这个例子更新你的查询

HTML

// first drop down menu
<select id="city" name="city">
    <option value="">Select City</option>
    <option value="1">Cairo</option>
    <option value="2">Alexandria</option>
    <option value="3">Tanta</option>
</select>

// Second drop down menu you want to populate it depending on the choosing from first drop down menu
<select id="universities" name="universities"></select>

JAVASCRIPT

<script>
    $("#city").change(function() {
        var city_id = $(this).val();
        var selectize = $("#universities")[0].selectize;
        $.ajax({
            url: '/gitUniversities.php',
            type: 'GET',
            dataType: 'json',
            data: {
                city_id: city_id,
            },
            error: function(response) {
                selectize.clear();
                selectize.clearOptions();
                selectize.disable();
            },
            success: function(response) {
                console.log(response);
                //alert(response);
                selectize.enable();
                selectize.clear();
                selectize.clearOptions();
                selectize.load(function(callback) {
                    callback(response.data);
                });
            }
        });
    });

    $('#universities').selectize({
        valueField: 'key',
        labelField: 'value',
        searchField: 'value',
        options: [],
        create: false,
        render: {
            option: function(data, escape) {
                return '<div class="option">' + escape(data.value) +'</div>';
            }
        }
    });
</script>

PHP

gitUniversities.php 文件

// city_id came from ajax request
$city_id = $_GET['city_id'];
// your query to select from table `universities`  where the city = city_id
$universities = SELECT `id` as 'key',`name` as 'value' FROM `universities` WHERE `city_id` = $city_id;
// return data as json
return json_encode(['data' => $universities, 'status' => true]);

它现在应该和你一起工作

Answer 2

在此处查看示例：http://brianreavis.github.io/selectize.js/

看看城市/州的例子。关键是 .load 方法。在 states 下拉列表 中，onChange 事件有一个 ajax 调用，用于加载城市下拉列表。调用 states 下拉列表的 onChange 事件，并将选定的值传递到函数中并发送到 url 以获取大学。回调函数返回您想要加载到城市下拉列表中的结果。

   onChange: function(value) {
            if (!value.length) return;
            select_city.disable();
            select_city.clearOptions();
            select_city.load(function(callback) {
                xhr && xhr.abort();
                xhr = $.ajax({
                    url: 'https://jsonp.afeld.me/?url=http://api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
                    success: function(results) {
                        select_city.enable();
                        callback(results); <--- THIS CALL RETURNS THE JSON RESULTS TO THE CALLER
                    },
                    error: function() {
                        callback(); <--THIS RETURNS TO CALLER ON ERROR 
                    }
                })
            });