我试图通过连接来自两个相同大小的独立数组的内容来生成HTML。对于数组中的每个索引，应创建一对选择。第一个选择将具有来自第一个数组的元素，第二个选择具有来自第二个数组的元素。在两个选择中，应选择当前元素。
我可以创建第一组选择，如下所示，但我无法弄清楚如何创建第二组选择。
var myArryNames = [
"John",
"jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
for (var j = 1; j < myArryValues.length; j++) {
var thisRow = $('.dropdown').last(".dropdown");
var newid = parseInt(thisRow.attr('divid')) + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).
find('select').each(function() {
$(this).attr('name', 'myDropdown[' + (newid - 1) + ']');
}).end().
find('option[value="' + myArryValues[j] + '"]').each(function() {
$(this).attr('selected', 'selected');
}).end();
thisRow.next('.dropdown').attr("divid", newid).attr("id", "bookTemplate-" + newid);
//$('select[id="bookTemplate-'+newid+'"]').val(myArryValues[j]);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>
HTML输出应该如下所示
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World" selected="selected">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John" selected="selected">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" selected="selected">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" selected="selected">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" >Javascript</option>
<option value="Jquery" selected="selected">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" >Jennifer</option>
<option value="Angel" selected="selected">Angel</option>
</select>
</div>
答案 0 :(得分：0)
以下代码是对您的代码的修改，我相信通过使用＆＃34; nth-child＆＃34; jQuery中的selector。
添加了代码来执行此操作。
var myArryNames = [
"John",
"Jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
var thisRow = $('.dropdown').last(".dropdown");
// Copy the two new rows
for (var j = 0; j < myArryValues.length; j++) {
var row;
// If j is non-zero, we need a new row
if (j) {
var newid = parseInt(thisRow.attr('divid')) + 1;
row = thisRow.clone(true).insertAfter(thisRow);
row.find('.myDropdown').attr('name', 'myDropdown[' + (newid - 1) + ']');
}
else {
row = thisRow;
}
// Alternate 1: select the appropriate options by position. This find will return elements from both divs, but since we don't care what the data is, just the position it works correctly
//row.find('option:nth-child('+(j+1)+')').attr('selected', 'selected');
// Alternate 2: Select the appropriate options by setting the value on the select itself
//row.find('.myDropdown').val(myArryValues[j]);
//row.find('.myNames').val(myArryNames[j]);
// Alternate 3: Manually modify the "selected" attribute of the appropriate options.
row.find('.myDropdown option[value="'+myArryValues[j]+'"]').attr('selected', 'selected');
row.find('.myNames option[value="'+myArryNames[j]+'"]').attr('selected', 'selected');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>