Javascript 使用ajax填充select时没有选定默认选项的问题

我遇到了一个问题，当我用ajax调用填充选择框时，无法选择默认选项，我有值，但不是默认值，我希望默认值将是我从调用中获得的第一个值

我的HTML是（我们将使用select2）：

虽然ajax调用是这样的（注释是为您准备的）：

loadEvento:function（）{
$select2=$（'.select2'）；
looghi.savelogo（）；//不在乎
$
.阿贾克斯({
网址：'http://localhost:8080/Redman-模拟服务/服务/组合事件'，
数据类型：“json”，
//数据：JSON.stringify（opzioniSelezionate.luogo），
成功：功能（数据）{
控制台日志（数据）；
$select2.html（“”）；
//将第一个值设置为选定值
var first_迭代=真；
$。每个（数据、函数（键、值）{
var o=新选项（val，键）；
if（第一次迭代）{
o、 selected=true；//还尝试了$select2.html（o）；
第一次迭代=假；
}
$select2.追加（o）；
})
},
错误：函数（err）{
$select2.html（'nessun dato disponibile'）；
控制台日志（err）；
}
});
}

通话后我的html是（F12）：

选择1
选择2
选择3
选项4选项5

---

跨度元素是否存在问题？为什么为空？

加载所有选项后选择默认值。检查下面

loadEvento : function() {

            $select2 = $('.select2');
            luoghi.saveLuogo();  //dont care about
            $
                    .ajax({
                        url : 'http://localhost:8080/Redman-Mock-Services/services/comboevento',
                        dataType : 'json',
//                        data: JSON.stringify(opzioniSelezionate.luogo),
                        success : function(data) {
                            console.log(data);
                            $select2.html('');
//                          SETTING 1st value as selected
                            var first_iteration = true;
                            $.each(data, function(key, val) {
                                var o = new Option(val,key);
                                  if (first_iteration) {
                      o.selected = true; // ALSO TRYED $select2.html(o);
                                      first_iteration = false;
                                  }
                                   $select2.append(o);
                            })
                         // Select the default value once all the options are loaded
                         $('select[name=dettaglio2]').val($('select[name=dettaglio2] option:first').val());
                        },
                        error : function(err) {
                            $select2.html('<option id="0">nessun dato disponibile</option>');
                            console.log(err);

                        }
                    });

        }

loadEvento:function（）{
$select2=$（'.select2'）；
looghi.savelogo（）；//不在乎
$
.阿贾克斯({
网址：'http://localhost:8080/Redman-模拟服务/服务/组合事件'，
数据类型：“json”，
//数据：JSON.stringify（opzioniSelezionate.luogo），
成功：功能（数据）{
控制台日志（数据）；
$select2.html（“”）；
//将第一个值设置为选定值
var first_迭代=真；
$。每个（数据、函数（键、值）{
var o=新选项（val，键）；
if（第一次迭代）{
o、 selected=true；//还尝试了$select2.html（o）；
第一次迭代=假；
}
$select2.追加（o）；
})
//加载所有选项后，选择默认值
$（'select[name=dettaglio2]'）.val（$（'select[name=dettaglio2]option:first'）.val（））；
},
错误：函数（err）{
$select2.html（'nessun dato disponibile'）；
控制台日志（err）；
}
});
}

---

您应该在选择标记已填充时尝试此操作/

加载选项后使用以下命令：

$('.select2 option:eq(1)').prop('selected', true)

这里

1

是索引。您可以轻松地按索引设置默认值。 将您的成功部分更改为以下代码：

                 success : function(data) {
                            console.log(data);
                            $select2.html('');
//                          SETTING 1st value as selected
                            var first_iteration = true;
                            $.each(data, function(key, val) {
                                var o = new Option(val,key);
                                  if (first_iteration) {
                                      o.selected = true; // ALSO TRYED $select2.html(o);
                                      first_iteration = false;
                                  }
                                   $select2.append(o);
                            })
                         // Select the default value once all the options are loaded
                         $('.select2 option:eq(1)').prop('selected', true)
                      },

如果有2.select2类，则使用index for.select2

---

（）

多亏了普加什，我修改了他的答案，得出了这个有效的解决方案：

 $("#select-4-button").children("span").html($('select[name=dettaglio2] option:first').text());

完整代码：

loadEvento : function() {

            $select2 = $('.select2');
            luoghi.saveLuogo();  //dont care about
            $
                    .ajax({
                        url : 'http://localhost:8080/Redman-Mock-Services/services/comboevento',
                        dataType : 'json',
//                        data: JSON.stringify(opzioniSelezionate.luogo),
                        success : function(data) {
                            console.log(data);
                            $select2.html('');
//                          SETTING 1st value as selected
                            var first_iteration = true;
                            $.each(data, function(key, val) {
                                var o = new Option(val,key);
                                  if (first_iteration) {
                      o.selected = true; // ALSO TRYED $select2.html(o);
                                      first_iteration = false;
                                  }
                                   $select2.append(o);
                            })
                         // Select the default value once all the options are loaded
                              $("#select-4-button").children("span").html($('select[name=dettaglio2] option:first').text());
                        },
                        error : function(err) {
                            $select2.html('<option id="0">nessun dato disponibile</option>');
                            console.log(err);

                        }
                    });

        }

loadEvento:function（）{
$select2=$（'.select2'）；
looghi.savelogo（）；//不在乎
$
.阿贾克斯({
网址：'http://localhost:8080/Redman-模拟服务/服务/组合事件'，
数据类型：“json”，
//数据：JSON.stringify（opzioniSelezionate.luogo），
成功：功能（数据）{
控制台日志（数据）；
$select2.html（“”）；
//将第一个值设置为选定值
var first_迭代=真；
$。每个（数据、函数（键、值）{
var o=新选项（val，键）；
if（第一次迭代）{
o、 selected=true；//还尝试了$select2.html（o）；
第一次迭代=假；
}
$select2.追加（o）；
})
//加载所有选项后，选择默认值
$（“#选择-4按钮”）.children（“span”）.html（$（'select[name=dettaglio2]option:first'）.text（））；
},
错误：函数（err）{
$select2.html（'nessun dato disponibile'）；
控制台日志（err）；
}
});
}

我回答是因为解决方案更清晰，但对他的回答和对我有帮助的评论表示赞同

---

（我赞扬了所有帮助过我的人，非常感谢）；）

请尝试在第一个迭代器中检查O的值。在第一次迭代=false之后，我已经完成了一个console.log；结果是选项1，似乎HTML中的span干扰了：所选内容看起来不合法，但没有任何变化；您认为可以修改跨度吗

$('.select2 option:eq(1)').prop('selected', true)

                 success : function(data) {
                            console.log(data);
                            $select2.html('');
//                          SETTING 1st value as selected
                            var first_iteration = true;
                            $.each(data, function(key, val) {
                                var o = new Option(val,key);
                                  if (first_iteration) {
                                      o.selected = true; // ALSO TRYED $select2.html(o);
                                      first_iteration = false;
                                  }
                                   $select2.append(o);
                            })
                         // Select the default value once all the options are loaded
                         $('.select2 option:eq(1)').prop('selected', true)
                      },

 $("#select-4-button").children("span").html($('select[name=dettaglio2] option:first').text());

loadEvento : function() {

            $select2 = $('.select2');
            luoghi.saveLuogo();  //dont care about
            $
                    .ajax({
                        url : 'http://localhost:8080/Redman-Mock-Services/services/comboevento',
                        dataType : 'json',
//                        data: JSON.stringify(opzioniSelezionate.luogo),
                        success : function(data) {
                            console.log(data);
                            $select2.html('');
//                          SETTING 1st value as selected
                            var first_iteration = true;
                            $.each(data, function(key, val) {
                                var o = new Option(val,key);
                                  if (first_iteration) {
                      o.selected = true; // ALSO TRYED $select2.html(o);
                                      first_iteration = false;
                                  }
                                   $select2.append(o);
                            })
                         // Select the default value once all the options are loaded
                              $("#select-4-button").children("span").html($('select[name=dettaglio2] option:first').text());
                        },
                        error : function(err) {
                            $select2.html('<option id="0">nessun dato disponibile</option>');
                            console.log(err);

                        }
                    });

        }