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

以下是您最初使用$.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 2

使用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 3

以下是使用<section>和$.append()的演示：

$.map()

var cities = ['Larissa', 'Athens', 'Patra'];

$('#cities').append(
	// 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
    	$.map(cities, function(val, ndx){
        	return $('<option>', {
            	value : val,
                text : val
            })
        })
    ) // end of select
)

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

如何在jQuery中的append或html方法内迭代？

4 个答案: