AJAX填充Select2不可点击

Posted 2023-05-07

【中文标题】AJAX填充Select2不可点击

【英文标题】：AJAX filled Select2 not clickable

【发布时间】：2016-06-03 02:35:45

【问题描述】：

我将 Select2 用于一个项目。第二个选择框的填充取决于第一个框中的所选项目，如下面的链接所示。但是，由于某种原因，我无法单击第二个选择框中的第一项。如果我愿意，我选择第一个项目的唯一方法是首先选择不同的用户，然后返回第一个用户。我该如何解决这个问题？

视频：

我的代码：

这是第一个选择框，由常规 php (Laravel) 填充。这里一切正常。

<div class="form-group">
    <label for="select"> Partner: </label>
    <select id="select" name="select" class="searchselect searchselectstyle">
        @foreach($partners as $i => $partner)
            <option $i == 0 ? 'selected' : '' value="$partner->id">$partner->name</option>
        @endforeach
    </select>
</div>

这里是第二个选择框，有错误。

<div class="form-group" >
    <label for="select2"> Hoofdgebruiker: </label>
    <select id="select2" style="min-width: 200px;" name="select2" class="searchselect searchselectstyle">

    </select>
</div>


<script type="text/javascript">
$(document).ready(function()
    var url = '/json/getusers';
    var $post = ;
    $post.id = $("select").val();

    $.ajax(
        type: "POST",
        dataType: "json",
        url: url,
        data: $post,
        cache: false
    ).done(function(data)
                $('#select2')
                        .find('option')
                        .remove()
                        .end();

                $.each(data, function(i, value) 
                    console.log(data);
                    $('#select2').append($('<option>').text(value.text).attr('value', value.id));
                );
            
    );
);

-

public function getusers()
    if(!isset($_POST['term']))
        $users = User::where('partner_id', $_POST['id'])->get();
    else
        $wildcard = '%'.$_POST['term'].'%';
        $users = User::where('partner_id', $_POST['id'])->where('email', 'LIKE',  $wildcard)->get();
    

    $array = array();

    foreach($users as $i => $user)
        $array[$i] = array("id" => $user->id, "text" => $user->email);
    
    return response()->json($array);

【问题讨论】：

您是否尝试过在$.each 函数之前附加一个空白选项（<option></option>）？

@ArmanOzak 这给了我一个小的空选项，比如这里：gyazo.com/17a79875dd28a43cac148f576c5eb659

好的。您还可以在您的<select> 标签上添加data-placeholder="Anything you like here" 吗？顺便说一句，当你这样做时，你也应该在你的 PHP 中添加一个空白选项。

@ArmanOzak 同样的问题：bit.ly/20Oi3Wq

最后一个想法：您能否尝试在创建新选项之前放置$('#select2').select2('destroy');，在创建它们之后放置$('#select2').select2();？如果这也不起作用，我保证，我没有想法。 (:

【参考方案1】：

检查 json 数据中键“id”是否区分大小写。可能您返回“ID”而不是“id”。

"results":["id":"3","text":"Exampe 3","id":"4","text":"Example 4","id":"16","text":"Example 16"]

不是这样的

"results":["ID":"3","text":"Exampe 3","ID":"4","text":"Example 4","ID":"16","text":"Example 16"]

【讨论】：

非常感谢兄弟！这是一个解决方案！该参数确实需要是“id”，而不是另一个名称。

【参考方案2】：

我找到了解决办法，如下：

<script type="text/javascript">
    $(document).ready(function() 
        $(".searchselect").select2();

        search();
        $("#select").change(function()
            search();
        );
    );

    function search()
        var $post = ;
        $post.id = $("#select").val();
        $("#select2").select2(
            ajax: 
                dataType: "json",
                type: "POST",
                data: function (params) 
                    var query = 
                        term: params.term,
                        id: $post.id
                    ;
                    return query;
                ,
                url: '/json/getusers',
                cache: false,
                processResults: function (data) 
                    return 
                        results: data
                    ;
                
            
        );
    
</script>

现在我正在使用 Select2 中内置的常规 AJAX 功能，现在一切正常！