Jquery选择更改

Question

我有一个选择框（Specie）和一个 typeAhead 输入字段（Breed），我需要更新选择框的变化，我有以下代码。

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 profile-fields-margin-bottom">
    <select class="form-control select_field_style specie-breed" id="species" name="species" required>
        <option disabled selected>Select a Species</option>
        <option value="Dog">Dog</option>
        <option value="Cat">Cat</option>
        <option value="Horse">Horse</option>
    </select>
</div>

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 profile-fields-margin-bottom">
    <input id="breed" type="text" class="form-control charsonly" name="breed" placeholder="Breed">
</div>


$(document).on('change', '.specie-breed', function() {
    let specie = this.value;
    $('#breed').typeahead({
        source:  function (query, process) {
            return $.get('/get/breeds/' + specie, { query: query }, function (data) {
                console.log(data);
                return process(data);

            });
        }
    });
});

它的工作，但第一次，第二次更改不会改变预先输入的值，

我在这里错过了什么？

Answer 1

它的工作，但第一次，第二次改变没有 更改预先输入的值，

我认为这是因为第二次、第三次等，AJAX URL 不再更改；那是因为 specie 仍然是最初分配给它的值。

我的意思是，假设您从下拉菜单中选择了Cat；因此该菜单的第一个change 事件被触发，并且specie 设置为Cat。但是，当您稍后选择Horse（或Dog）时，source 选项的闭包中的specie 仍为Cat。

This Pen可能会帮助你理解它。

因此，一个简单的解决方法是将 specie 引用到 this 而不是 this.value。

$(document).on('change', '.specie-breed2', function() {
    let specie = this; // Reference the Element.
    $('#breed').typeahead({
        source:  function (query, process) {
            return $.get('/get/breeds/' + specie.value, { query: query }, function (data) {
                console.log(data);
                return process(data);

            });
        }
    });
});

或者你可以这样做：

$('#breed').typeahead({
    source:  function (query, process) {
        if ( ! $( '#species' ).val() ) {
          return;
        }

        return $.get('/get/breeds/' + $( '#species' ).val(), { query: query }, function (data) {
            console.log(data);
            return process(data);

        });
    }
});

更新

实际的解决方案，或 您在代码中缺少的（我认为）是：在重新初始化 typeahead 之前在 #breed 字段上销毁 typeahead在那个领域。

$(document).on('change', '.specie-breed', function() {
    let specie = this.value;

    // Destroy existing instance.
    $('#breed').typeahead( 'destroy' );

    // (Re-)Initialize `typeahead`.
    $('#breed').typeahead({
        source:  function (query, process) {
            return $.get('/get/breeds/' + specie, { query: query }, function (data) {
                console.log(data);
                return process(data);

            });
        }
    });
});

这样，specie 可以分配或引用到this.value（即当前选择的“物种”），并且您会得到正确的值（例如Cat 或Dog）。

见jQuery#typeahead('destroy')。

Answer 2

根据the docstypeahead的source函数可以接受两个或三个参数。如果你只使用两个，第二个，在你的代码中称为process，必须与结果同步调用。但是，在您的代码中，该回调仅在异步 AJAX 请求之后提供。

你有几个选择：

a) 使用同步/阻塞 GET。这有利于测试，但不应被视为真正的解决方案。

b) 使用source 函数的第三个参数。

请试试这个：

$(document).on('change', '.specie-breed', function() {
    let specie = this.value;
    $('#breed').typeahead({
        source:  function (query, syncResults, asyncResults) {
            $.get('/get/breeds/' + specie, { query: query }, function (data) {
                console.log(data);
                asyncResults(data);
            });
        },
        async: true
    });
});

如果这没有帮助，请确保您的 AJAX 请求成功。 $.get 上的默认处理程序仅适用于 success，但不适用于错误。特别是包含 query 的对象在 GET 请求中看起来很可疑。请在您的页面打开时在控制台中尝试此行：

$.get('/get/breeds/' + specie, { query: query }, function(data) {
    console.log(data);
});

如果那不打印你的数据，那么你需要先修复这部分。