Question

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

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

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

检查此...

＆＃13;

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

＆＃13;

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

＆＃13;

选择与数组值jquery匹配的选项文本

1 个答案: