页面加载后立即设置 select2 值

Posted 2023-05-07

【中文标题】页面加载后立即设置 select2 值

【英文标题】：Set select2 value as soon as page loads

【发布时间】：2015-10-21 11:11:32

【问题描述】：

我知道这个问题已经被问过好几次了，但实际上我已经研究了 4 个小时的解决方案，但找不到针对我的具体问题的解决方案。

我在 Laravel 刀片编辑视图上有一个 select2 选择字段，我想将它的值设置为传递给视图的数据。将数据传递给视图已经发生了，使用选择字段也没有问题，它工作得很好。但是我一直在尝试的每一次尝试都无法设置它。我一直在搞乱一个按钮来设置选择字段的值，但是每次修改

$("select[name=customer]").val("1");

未能做到这一点。它总是传输“？id = null”。我会很感激有人对此有所了解，因为没有这个我真的无法继续。我在下面添加重要的代码部分，如果您需要更多内容，请回复。提前致谢！

---

选择 HTML：

<label>*Customer</label>
<select class="form-control" name="customer" id="customer" style="width: 100%">
     <option></option>
</select>

选择2：

$("select[name=customer]").select2(
    allowClear : true,
    placeholder : "Choose customer",
    ajax : 
        url : "/search/autocomplete/get_customers",
        dataType : 'json',
        type : "GET",
        quietMillis : 50,
        delay : 250,
        data : function(params) 
            return 
                filter : params.term
            ;
        ,
        processResults : function(data) 
            return 
                results : $.map(data, function(item) 
                    return 
                        text : item.name + ' (' + item.customer_code + ')',
                        id : item.id
                    
                )
            ;
        ,
        initSelection : function (element, callback) 
              var data = [];
              $(element.val()).each(function () 
                data.push(id: this, text: this);
              );
              callback(data);
        
    
);

按钮：

<button type="button" onclick="test()">Test</button>

函数测试()：

function test()         
    $("select[name=customer]").val("1");
;

我一直在尝试对此进行一些更改，示例：

$("select[name=customer]").val("1");
$("select[name=customer]").val("1").change();
$("select[name=customer]").val("1").trigger("change");
$("select[name=customer]").select2("val", "1");

列表继续。

如果我没有提供重要的东西，请给我留言或重播！

最好的问候

尼克

【参考方案1】：

首先您应该使用console.log(); 检查选择器是否正确。这次使用单引号作为属性名称。 select[name='customer']

 var select = $("select[name='customer']");
 console.log(select.length);

如果它提供 0，则选择器是错误的。如果您在使用复杂的 CSS 选择器时遇到问题，您可能应该只使用 ID。

如果 jquery 选择器正确但出现错误，很可能是因为您通过 ajax 获取值并且不等待回调/成功。利用 jQuery 的 ajax 成功功能。

$.ajax(
    url: '...',
    success: function(response) 
        test();
    
);

你可以试试这样的。

$("select[name=customer]").select2(
    allowClear : true,
    placeholder : "Choose customer",
    ajax : 
        url : "/search/autocomplete/get_customers",
        dataType : 'json',
        type : "GET",
        quietMillis : 50,
        delay : 250,
        success: function()
            test();
        ,
        data : function(params) 
            return 
                filter : params.term
            ;
        ,
        processResults : function(data) 
            return 
                results : $.map(data, function(item) 
                    return 
                        text : item.name + ' (' + item.customer_code + ')',
                        id : item.id
                    
                )
            ;
        ,
        initSelection : function (element, callback) 
              var data = [];
              $(element.val()).each(function () 
                data.push(id: this, text: this);
              );
              callback(data);
        
    
);

【讨论】：

选择器是正确的，我在几个地方都在使用它。即使，我记录了它并返回 1。我不能安静地抓住我应该在哪里做那个 ajax 请求，你能解释一下吗？感谢您的回答！

我不确定是否在 select2 扩展中提供了这个成功回调，但我给出了一个你可以尝试的小例子。您应该检查您要选择的选项是否已经可用。

这似乎没有任何作用。但是，我要总结一下我的需求，所以我们肯定是在一条线上。我基本上想使用给定的 id 将输入字段设置为特定数据。