選択内側ループを追加する方法

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コールの成功後に追加されることが保証されます。