javascript - 页面加载后立即设置 select2 值

Question

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

我在 Laravel Blade 编辑 View 上有一个 select2 选择字段，我想将其值设置为传递到 View 的数据。将数据传递到 View 已经发生，并且使用选择字段也没有问题，它工作得很好。但我的每一次尝试都未能成功。我一直在摆弄一个按钮来设置选择字段的值，但是每次修改

$("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");

列表继续。

如果我没有提供重要内容，请给我留言或重播!

致以诚挚的问候

尼克

Answer 1

首先，您应该使用 console.log(); 检查选择器是否正确。这次使用单引号作为属性名称。 选择[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);
        }
    }
});