Question

我需要帮助这个代码，点击+我只需要添加一个选项元素。如果我单击test01按钮多次，我想在之前添加+按钮元素选项，只有一个会将它们添加到我的更多。

var y=1;
$(document).ready(function(){
 $("#test01").click(function(){
	 var x=y++;		
		var plustypdiv = document.createElement("div"); plustypdiv.id="plustypdiv"+x; 
		var plustyp = document.createElement("input"); plustyp.type="button"; plustyp.value="+"; plustyp.id=""+x; plustyp.className="plustyp";
		
		document.body.appendChild(plustypdiv);
		plustypdiv.appendChild(plustyp);
		
	$(".plustyp").click(function (){
  
	

	var typi = ["0","0","2","3","4","5","6","7","8","9","10","11"];
		var plutypdiv2 = document.getElementById("plustypdiv"+this.id);
	    var tzp2 = document.createElement("select"); tzp2.className="tiphryd"; 
		 for (i=0;i<=11;i++){
		var opt= document.createElement("option"); opt.innerHTML= typi[i]; opt.value=i; 
	    plutypdiv2.appendChild(tzp2);
		tzp2.appendChild(opt);};
		
  }); 
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="button" id="test01" value="test01">

Answer 1

我认为你的意思是：

“当我点击test01按钮时，会出现一个新的+按钮。当我点击+按钮时，一个且只有一个选择元素应该出现在它旁边。“

如果是这种情况，这段代码可以解决问题：

（如果是这种情况，请改写你的问题）

;(function($){
  "use strict";

  var addRow = function(ev){
    ev.preventDefault();
    $('#shadow .row').clone(true,true).appendTo('form#f');
  };

  var addSelect = function(ev){
    ev.preventDefault();
    if ($(this).closest('.row').find('select').length > 0) {
      //  do nothing, because there already is a select element here  
    } else {
      $('#shadow select').clone(true,true).prop('disabled',false).insertAfter(this);  
    }
  };

  $('button.addrow').on('click',addRow);
  $('button.addselect').on('click',addSelect);

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="f">

  <button class="addrow">test01</button>

</form>  

<!-- poor man's shadow DOM -->
<div hidden="hidden" id="shadow">
  <div class="row">
    <button class="addselect">+</button>
  </div>
  <select disabled="disabled">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
</div>

只添加一个元素

1 个答案: