javascript - 选择一个与数组值 jquery 匹配的选项文本

Question

我有一个包含三个元素的数组，我循环遍历该数组以查看它的长度，以便它单击三次按钮以动态添加输入选择框。每个数组值将出现在每个添加的选择框上，并查找它是否与任何选项文本匹配(如果它添加了所选属性)。我尝试了不同的方法来做我将演示这两个代码是如何工作的

    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();
        });

下面的 HTML

    <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>

请帮忙:)

Answer 1

检查这个...

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>