我会解释一下这个场景。我有一个网站，我正在尝试为我的网站中的成员(member)收集“业务类型”。我显示所有已输入的现有企业，然后允许用户选择其中之一。如果用户希望输入另一个“业务类型”，我允许他选择“**其他”。当他点击“**其他”时，会显示一个框，用户可以在其中输入他的“业务类型”并添加该业务类型。
现在，如果用户有多项业务，我允许他“添加其他”。当他点击“添加其他”时，他会再次显示“业务类型”，包括之前输入的业务类型。如果用户再次选择“**其他” - 将显示一个框，并且当用户输入另一个“业务类型”时，先前的框和当前的框中将显示相同的内容。
我希望新值仅替换为新选择框，而不是先前的选择框。我该如何实现这一点。
我编写了一个小的 PHP 代码，它可以执行类似的操作。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function showfield(name){
if(name=='**OTHER')
var oth_busi_type = prompt("Please enter a new county", "");
if (oth_busi_type != null) {
$(var_1).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');
}}
$(document).on('click', '.add-more', function() {
console.log($('.details:eq(0)').clone());
$('.details:eq(0)').clone(true).appendTo('.details-parent');
});
</script>
</head>
<body>
<div class="details-parent">
<div class="details">
<table class="extra_table" summary="">
<tr>
<td class="aligntop bold">*Location:</td>
<td class="extra_field_input">
<select class='County' name='County' id='var_1' onchange='showfield(this.options[this.selectedIndex].value)' >
<option value="Select County..." selected="selected">Select County...</option>
<option value="DODGE" >DODGE</option>
<option value="DOUGLAS" >DOUGLAS</option>
<option value="LANCASTER" >LANCASTER</option>
<option value="MADISON" >MADISON</option>
<option value="**OTHER">**OTHER</option>
</select>
</td>
</tr>
<tr>
<td class="aligntop bold extra" style="display:none;">**Enter if **OTHER</td>
<td class="extra_field_input">
<input style="display:none;" type="text" size="17" name="Other_County" id="busi_type" />
</td>
</tr>
</table>
<div class="add-more">
<a href="#">Add more</a>
</div>
</div>
</div>
</body>
</html>
最佳答案
请在下面找到更新的代码
我也创建了
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready (function (e){
var details = $('.details:eq(0)').clone(true);
$(document).on ('change', '.County', function (e){
if ($(this).val() =='**OTHER'){
var oth_busi_type = prompt("Please enter a new county", "");
}
if (oth_busi_type != null) {
$(this).append('<option selected="selected" value="'+oth_busi_type+'">'+oth_busi_type+'</option>');
}
});
$(document).on('click', '.add-more', function() {
console.log($('.details:eq(0)').clone());
$(details).clone(true).appendTo('.details-parent');
});
});
</script>
</head>
<body>
<div class="details-parent">
<div class="details">
<table class="extra_table" summary="">
<tr>
<td class="aligntop bold">*Location:</td>
<td class="extra_field_input">
<select class='County' name='County' id='var_1' >
<option value="Select County..." selected="selected">Select County...</option>
<option value="DODGE" >DODGE</option>
<option value="DOUGLAS" >DOUGLAS</option>
<option value="LANCASTER" >LANCASTER</option>
<option value="MADISON" >MADISON</option>
<option value="**OTHER">**OTHER</option>
</select>
</td>
</tr>
<tr>
<td class="aligntop bold extra" style="display:none;">**Enter if **OTHER</td>
<td class="extra_field_input">
<input style="display:none;" type="text" size="17" name="Other_County" id="busi_type" />
</td>
</tr>
</table>
<div class="add-more">
<a href="#">Add more</a>
</div>
</div>
</div>
</body>
</html>
关于javascript - jQuery 仅替换新的选择框，而不替换之前的选择框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39199230/