jQueryでappendメソッドまたはhtmlメソッドを反復処理するにはどうすればよいですか？

Question

可能であれば、appendメソッドまたはhtmlメソッドで$ .eachを実行する方法を知ることができません。 例えば：

私は

cities = [Larissa,Athens,Patra]; 

配列を持っていると私は次のコードを作成したい：どのように私は動的にオプションの値と名前を作成することができます

` $('#cities').html(' <label for="cities">Select City</label><select name="cities" id="city">' + 
              ' <option value="Larissa">Larissa</option> ' + 
              ' <option value="Athens">Athens</option> ' + 
              ' <option value="Thessaloniki">Thessaloniki</option> ' + 
              ' <option value="Patra">Patra</option>' +'</select>');` 

を私の配列に基づいて。 すべての洞察は歓迎です

Answer 1

Array#mapとArray#joinの方法を使用してください。

var cities = ['Larissa', 'Athens', 'Patra']; 

$('#cities').html(' <label for="cities">Select City</label><select name="cities" id="city">' + 
    cities.map(function(v) { 
    return '<option value="' + v + '">' + v + '</option> '; 
    }).join('') + '</select>' 
); 

Answer 2

最初に尋ねたとおりに$.eachを使用する方法は次のとおりです。ここで

var cities = ['Larissa','Athens','Patra']; 
 

 
$.each(cities, function(index, city){ 
 
    $('select').append('<option value="' + city + '">' + city + '</option>') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select></select>

Answer 3

$.append()と$.map()を使用してデモです：

var cities = ['Larissa', 'Athens', 'Patra']; 
 

 
$('#cities').append(
 
\t // add label 
 
    $('<label>', { 
 
     for: "cities", 
 
     text: "Select City" 
 
    }) // end of label 
 
    , 
 
    // followed by the select with its options 
 
    $('<select>', { 
 
     name: 'cities', 
 
     id: 'city' 
 
    }).append(// appending the options in select 
 
    \t $.map(cities, function(val, ndx){ 
 
     \t return $('<option>', { 
 
      \t value : val, 
 
       text : val 
 
      }) 
 
     }) 
 
    ) // end of select 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cities"> 
 

 
</div>

Answer 4

あなたはこの

を試してみてください

var cities = ['Larissa','Athens','Patra']; 
var select = $('<select>'); 
$(cities).each(function (index, item) { 
    select.append('<option>'+item+'</option>') 
}) 
$('#cities').html(' <label for="cities">Select City</label>'); 
$('#cities').append(select); 

See working example