如何在循环内附加选择

Question

我正在尝试在循环中附加选择选项，但我无法理解如何执行此操作。我在 jquery 中的正常代码是这样的： var myselect2 = $('');

  var myselect2 = $('<select>');
   myselect2.append( $('<option disabled selected value ></option >').val("").html("") );
       myselect2.append( $('<option ></option>').val("a").html("a") );
       myselect2.append( $('<option ></option>').val("b").html("b") );
       myselect2.append( $('<option ></option>').val("c").html("c") );
       myselect2.append( $('<option ></option>').val("d").html("d") );

           $('#health_institutions1').append(myselect2.html());

我的 html 代码是：

 <select multiple="" class="form-control" id="health_institutions1">

我正在尝试下面的代码，但没有成功

  myselect2.append( $('<option disabled selected value ></option >').val("").html("") );
  $.ajax({
       type: 'GET',
       url: url()+'/patient_occupancies.json',
       dataType: 'json',
       success: function (datavalues1) {



         $.each(datavalues1, function( i, val ) {
                   var indicator1 = val.indicators;

                   if (indicator1 === 'Outpatient visits') {
                     var x = val.District;
                     myselect2.append( $('<option ></option>').val(x).html(x) );
                      //  console.log(textToInsert);
                  console.log(x);                   }

         });


       }
   });

$('#health_institutions1').append(myselect2.html());

在我的情况下如何附加选项不起作用。

Answer 1

类似下面的代码应该可以实现你想要的。

var myselect2 = $('<select>');
myselect2.append($('<option disabled selected value ></option >').val("").html(""));

var items = ["a", "b", "c", "d"];
for (var i = 0; i < items.length; i++) {
    myselect2.append($('<option ></option>').val(items[i]).html(items[i]));
}

$('#health_institutions1').append(myselect2.html());

基本上我们正在创建一个包含 4 个值的数组 items。 a、b、c 和 d。然后运行一个 for 循环将每个附加到myselect2。

请记住，如果您正在执行 AJAX 调用，例如更新的问题，您需要在运行创建元素后将其附加到您的页面。这意味着您需要将最终追加放在 AJAX 回调中。例如。

success: function(datavalues1) {
    $.each(datavalues1, function(i, val) {
        var indicator1 = val.indicators;

        if (indicator1 === 'Outpatient visits') {
            var x = val.District;
            myselect2.append($('<option ></option>').val(x).html(x));
            //  console.log(textToInsert);
            console.log(x);
            $('#health_institutions1').append(myselect2.html());
        }
    });
}

这将确保它仅在 AJAX 调用成功后才被附加。