我有一个包含三个元素的数组,我循环遍历该数组以查看它的长度,以便它单击三次按钮以动态添加输入选择框。每个数组值将出现在每个添加的选择框中,并查找它是否与任何选项文本匹配,如果它添加所选属性。我尝试了不同的方法来做我将演示这两个代码是如何工作的
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
]
for (var i = 0; i < myArryValues.length; i++) {
//New code
var s = $('<select class="myDropdown">');
for (var j = 0; j < myArryValues.length; j++) {
if (i == j) {
$('<option />', {
value: myArryValues[j],
text: myArryValues[j],
selected: 'selected'
}).appendTo(s);
} else {
$('<option />', {
value: myArryValues[j],
text: myArryValues[j]
}).appendTo(s);
}
}
s.appendTo('.mySelect');
var bookIndex = 0;
$('#bookForm').on('click', '.mynewButton', function() {
///I had this code before it wasnt find anything
$('.myDropdown').each(function(index) {
console.log("operatorString", operatorString);
var operatorCounter = 0;
var optionCounter = 0;
$(this).find('option').filter(function() {
if ($(this)[optionCounter] == myArryValues[operatorCounter]) {
$(this)[optionCounter].attr('selected', "selected");
operatorCounter++;
} else {
optionCounter++;
}
});
});
console.log("mynewButton");
bookIndex++;
var bookForm = $('#bookForm');
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.addClass('myDropdown-row')
.removeClass('hide')
.attr('data-book-index', bookIndex)
.attr('id', '');
bookForm.append($clone);
// Update the name attributes
$clone
.find('[name="myDropdown"]').attr('name', 'myDropdown[' + bookIndex + '].myDropdown').end()
})
// Remove button click handler
.on('click', '.removeButton', function() {
$(this).parents('.form-group').remove();
});
下面的网页
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row" id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-2 button-div">
<button type="button" class="mynewButton rule-button">Add New
</button>
</div>
</div>
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="row field-row">
<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">Jquery</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>
<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>
<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 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>
<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>
<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 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>
<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>
<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 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 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 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>
请帮忙:)
检查这个...
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]);
}
});
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>
</div>