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

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

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

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

                 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 （ Check This Link for same ）

Answer 4

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

                        }
                    });

        }

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

（我已帮助所有帮助过的人，非常感谢）;）

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

4 个答案: