如何追加选择内部循环

Posted 2021-04-10

我试图在循环中追加选择选项，但我无法理解如何做到这一点。我在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());

它不起作用如何在我的案例中附加选项。

答案

像下面的代码应该达到你想要的。

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调用成功后才会被追加。