我有四个选择框，默认情况下我显示其中一个。在第一个下有 2 个链接，一个说再添加一个位置，另一个说删除一个位置。
基本上我所做的是将选择框包裹在一个 div 标签中，当点击添加一个时我显示另一个位置，当点击删除位置时隐藏该位置。
我也有 4 个选择框的限制，所以当达到 4 个时它会显示一个警告，当 3 个被删除时它会显示一个警告说至少需要一个
我面临的问题是，一旦显示页面，我可以通过单击添加一个位置，但是当单击删除时，它不会隐藏，直到单击 2 次，从那时起，如果我再添加一个，我会单击两次。谢谢
这是我的代码
var i = 2;
$(".addonemore").click(function(){
if( i > 4){
alert("You can add only a maximum of 4 locations");
} else {
$('.location-'+i).css({'display':'table'});
i++;
}
});
$(".rmone").click(function(){
if( i < 2){
alert("You need at least one location and color");
} else {
$('.location-'+i).css({'display':'none'});
i--;
}
});.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
<h2 class="section-title">3. Design Location & Colors</h2>
<p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
<div class="pc-row location-1">
<div class="locations-colors pc-col quote-sizes">
<h4>Choose location below</h4>
<label for="location_one"><span>Location</span>
<select name="location_one" id="location_one" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div>
<div class="pc-row location-2">
<div class="locations-colors pc-col quote-sizes">
<label for="location_two"><span>Location</span>
<select name="location_two" id="location_two" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div>
<div class="pc-row location-3">
<div class="locations-colors pc-col quote-sizes">
<label for="location_three"><span>Location</span>
<select name="location_three" id="location_three" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div>
<div class="pc-row location-4">
<div class="locations-colors pc-col quote-sizes">
<label for="locatio_four"><span>Location</span>
<select name="location_four" id="location_four" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div><br />
<div class="pc-row">
<div class="pc-col">
<div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
<div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
</div>
</div>
</div>最佳答案
问题是您的添加和删除函数需要对不同的元素进行操作。通过按照@DanPhilip 的建议将 i 初始化为 1 并更改 add 函数作用的元素，您可以获得正确的行为。
这是一个可行的解决方案:
var i = 1;
$(".addonemore").click(function(){
if( i > 3){alert("You can add only a maximum of 4 locations");}else{
$('.location-'+ ++i).css({'display':'table'});
}
});
$(".rmone").click(function(){
if( i < 2){alert("You need at least one location and color");}else{
$('.location-'+i).css({'display':'none'}).find("option[value='']").attr({'selected':'selected'});
i--;
}
});.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
<h2 class="section-title">3. Design Location & Colors</h2>
<p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
<div class="pc-row location-1">
<div class="locations-colors pc-col quote-sizes">
<h4>Choose location below</h4>
<label for="location_one"><span>Location</span>
<select name="location_one" id="location_one" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div>
<div class="pc-row location-2">
<div class="locations-colors pc-col quote-sizes">
<label for="location_two"><span>Location</span>
<select name="location_two" id="location_two" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div>
<div class="pc-row location-3">
<div class="locations-colors pc-col quote-sizes">
<label for="location_three"><span>Location</span>
<select name="location_three" id="location_three" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div>
<div class="pc-row location-4">
<div class="locations-colors pc-col quote-sizes">
<label for="locatio_four"><span>Location</span>
<select name="location_four" id="location_four" class="linked-drop-down">
<option value="">choose location</option>
<option value="Full_Chest">Full Chest</option>
<option value="Full_Back">Full Back</option>
<option value="Front_Left_Chest">Front Left Chest</option>
<option value="Front_Right_Chest">Front Right Chest</option>
<option value="Left_Sleeve">Left Sleeve</option>
<option value="Right_Sleeve">Right Sleeve</option>
</select></label>
</div>
</div><br />
<div class="pc-row">
<div class="pc-col">
<div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
<div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
</div>
</div>
</div>编辑:修改 JavaScript 以在隐藏时将 select 元素返回到其默认选择。
关于javascript - 基于 2 次按钮单击显示和隐藏选择框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43005836/