使用 ajax 填充选择时没有选择的默认选项的问题

Question

当我用 ajax 调用填充选择框时，我遇到了无法选择默认选项的问题，我有值，但不是默认值，我希望默认值是第一个值我接到电话；

我的 HTML 是（我们将在 select2 上工作）：

<div class="containerdiv">
    <select class="select1" name="dettaglio1">
    </select> <select class="select2" name="dettaglio2">
    </select> <select class="select3" name="dettaglio3">
    </select>
</div>

虽然 ajax 调用是这样的（评论是给你的）：

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);
                            })
                        },
                        error : function(err) {
                            $select2.html('<option id="0">nessun dato disponibile</option>');
                            console.log(err);

                        }
                    });

        }

调用后我的html是（F12）：

<div id="select-4-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
  <span class="select2">&nbsp;</span>
  <select class="select2" name="dettaglio2">
  <option value="0">option1</option>
  <option value="1">option2</option>
  <option value="2">option3</option>
  <option value="3">option4</option
  ><option value="4">option5</option>
  </select></div>

是 span 元素的问题吗？为什么它是空白的？

Answer 1

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

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

                        }
                    });

        }

Answer 2

$(".select2")[0].selectedIndex = 0;

当你的选择标签已经被填充时，你应该试试这个/。

Answer 3

感谢 Pugazh，我修改了他的答案并得出了这个可行的解决方案：

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

                        }
                    });

        }

我之所以回答是因为解决方案更清楚，但对他的回答和对我有帮助的 cmets 竖起大拇指。

（我已经为所有提供帮助的人点赞，非常感谢）;)

Answer 4

加载选项后使用以下内容：

$('.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 类，则使用 .select2 的索引 (Check This Link for same)