时间戳

首页 > 解决方案 > Jquery选择更改

javascript - Jquery选择更改

问题描述

我有一个选择框（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);

            });
        }
    });
});

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

我在这里想念什么？

标签： javascriptjqueryselecttypeahead.js

解决方案

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

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

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

这支笔可以帮助您理解它。

因此，一个简单的解决方法是将其引用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 typeaheadon the #breedfield before re-initializing typeaheadon that field。

$(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')。

推荐阅读