gpt4 book ai didi

javascript - jQuery 仅替换新的选择框,而不替换之前的选择框

转载 作者:行者123 更新时间:2023-12-01 05:27:01 25 4
gpt4 key购买 nike

我会解释一下这个场景。我有一个网站,我正在尝试为我的网站中的成员(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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com