Javascript 页面加载后立即设置select2值

我知道这个问题以前已经被问过好几次了，但实际上我已经研究了4个小时的解决方案，没有找到解决我具体问题的方法

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

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

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

按钮：

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

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

我一直在尝试对其进行一些修改，例如：

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

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

名单还在继续

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

致意

---

尼克

首先，您应该使用

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);
        }
    }
});

---

选择器是正确的，我在几个地方使用它。尽管如此，我记录了它，它返回1。不过，我不知道我应该在哪里执行ajax请求，您能简要解释一下吗？谢谢你的回答！我不确定select2扩展是否提供了此成功回调，但我给出了一个小示例，您可以尝试。你应该检查你想要选择的选项是否已经可用。这看起来根本没有任何作用。不过，我要总结一下我的需求，所以我们肯定是在线的。我基本上希望使用给定的id将输入字段设置为特定的数据。