javascript - 使用 ajax 填充 select 时未选择默认选项的问题

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

                        }
                    });

        }