javascript - 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);

            });
        }
    });
});

它的工作，但第一次，第二次改变不会改变 typeahead 的值，

我在这里错过了什么？

Answer 1

Its working but for the first time, The second time change doesn't change the values of the typeahead,

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

我的意思是，假设您选择了 Cat从下拉菜单；所以第一个change该菜单的事件被触发，并且specie设置为 Cat .但是，当您稍后选择 Horse 时(或 Dog )， specie 来自 source 的闭包选项保持为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);

        });
    }
});

更新

实际的解决方案，或者您在代码中遗漏的，(我认为)是:Destroy 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') .