未捕获的类型错误：无法设置未定义选择的 jquery 的属性“选择”

Question

当从 Ajax 获取数据到选择下拉列表中时。在下拉列表中选择特定值时出错。

未捕获的类型错误：无法设置未定义的属性“已选择”
在 Chosen.result_select (chosen.jquery.js:1158)
在 Chosen.search_results_mouseup (chosen.jquery.js:1059)
在 HTMLUListElement。 (chosen.jquery.js:739)
在 HTMLUListElement.dispatch (jquery-2.2.3.min.js:3)
在 HTMLUListElement.r.handle (jquery-2.2.3.min.js:3)

$(document).ready(function(){
    $("#shopSelect .chosen-search-input").keyup(function(){
        var key = $('#shopSelect .chosen-search-input').val();
        if(key){
            $.ajax({
                url: '<?php echo base_url("admin/shopSearch"); ?>',
                data: {key:key},
                type: 'POST',
                dataType: "json",  
                cache:false,
                success: function (data) {
                    $('#shopSelect ul.chosen-results').empty($("#shopSelect ul.chosen-results").append("<li class='disabled-result result-selected' data-option-array-index='0'>Select One</li>"));
                    data.forEach(function(entry) {
                        $("#shopSelect ul.chosen-results").append("<li class='active-result' data-option-array-index='"+entry.id+"'>"+entry.name+"</li>");
                    });
                }, error: function (err) {
                    if (typeof (failure) == 'function') {
                        console.log(err)
                    }
                }
            });
            $("#shopSelect .active-result").keyup(function(){
                $("#shopSelect ul.chosen-results").trigger("chosen:updated");       
            });
        }
    });
});

但是当我在没有 Ajax 的情况下使用时。给静态下拉选项值它的工作完美。我正在使用chosen

<select name="shops" id="shops" class="form-control chosen-select" tabindex="2" style="width: 100%;">
    <option selected="" value="" disabled="">Select One</option>
    <option value="1">OptionOne</option>
    <option value="2">OptionTwo</option>
    <option value="3">OptionThree</option>
</select>

Answer 1

您必须将以下代码更改为

 $("#shopSelect ul.chosen-results").append("<li class='active-result' data-option-array-index='"+entry.id+"'>"+entry.name+"</li>"); 

 $("#shopSelect ul.chosen-results").append('<option value="entry.id">entry.name</option>');

然后在你的ajax成功中调用选择的触发器更新

所以整个代码看起来像

$(document).ready(function(){
    $("#shopSelect .chosen-search-input").keyup(function(){
        var key = $('#shopSelect .chosen-search-input').val();
        if(key){
            $.ajax({
                url: '<?php echo base_url("admin/shopSearch"); ?>',
                data: {key:key},
                type: 'POST',
                dataType: "json",  
                cache:false,
                success: function (data) {
                                 $('#shopSelect ul.chosen- 
                                 results').empty($("#shopSelect ul.chosen- 
                                 results").append("<li class='disabled-result 
                                 result-selected' data-option-array- 
                                 index='0'>Select One</li>"));
                    data.forEach(function(entry) {
                       $("#shopSelect ul.chosen-results").append("<li 
                       class='active-result' data-option-array- 
                       index='"+entry.id+"'>"+entry.name+"</li>"); 

                       $("#shopSelect ul.chosen-results").append('<option 
                       value="entry.id">entry.name</option>');
                    });
                     $("#shops").trigger("chosen:updated");
                }, error: function (err) {
                    if (typeof (failure) == 'function') {
                        console.log(err)
                    }
                }
            });

        }
    });
});

如果您正在寻找已选择的自动建议选项，请使用 this 示例。