Javascript 单击按钮时隐藏HTML表单字段，并将其替换为其他字段

我有一个html表单，其中有一个字段需要隐藏起来，并在单击按钮时替换为另一个字段。我不能完全删除这个字段，因为它的值仍然必须提交。以下是一些示例代码供参考：

<select id="Id.0" onChange="changeTextBox();">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>

基本上，当点击addButton时，Id.0必须消失（但仍然是表单的一个成员），并被Id=“Id.1”的相同字段替换，然后再次点击Id=“Id.2”等等

---

是否有一种方法，使用JavaScript或jQuery，在单击此按钮时隐藏并替换此字段？谢谢

使用jQuery可能会有所帮助

elmCount = 0;

function addQual()
{
  $("#Id." + elmCount).css('visibility', 'hidden');
  $("#Id." + elmCount).css('height', '0px');
  elmCount += 1;
}

感谢评论。

<div id="divAny">
 <select id="Id.0" onChange="changeTextBox();">
</div>
<input type="button" id="addButton" value="Add" onclick="addQual();"/>

var index = 0;
function addQual(){
 $("#divAny").hide();
 $("#Id."+index).attr("id" , "Id."+ (++index));
}

var指数=0；
函数addQual（）{
$（“#divAny”）.hide（）；
$（“#Id.”+索引）.attr（“Id”，“Id.”+索引））；
}

作为@MahanGM答案的替代方法，我将尽量减少jQuery的使用，并在您的

addQual

函数中只执行以下操作：

addQual = function() {
    $('select').toggleClass('hidden');
}

然后需要一个css类

hidden

来隐藏所需的元素。正如其他人所说，如果您不想丢失输入值，就不能使用

display:none

.hidden {
    visibility: hidden;
    height: 0;
}

当您在标记中同时显示

select

s时，只有您最初想要隐藏的一个才具有相应的类：

<select id="Id.0">
<select id="Id.1" class="hidden">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>

---

span

s:

我眼中最干净的解决方案的一个基本示例：参见此处

HTML，没什么特别的：

<select class="replaceableSelect" id="Id.0">
    <option name="one" value="one">One</option>
</select>
<button id="addButton">Add</button>

---

提示：要处理表单的结果，请确保每个选择都有一个唯一的名称。

您的编码尝试在哪里？@BradM我没有代码，我做了一些研究，但找不到可行的解决方案。我不完全确定我到底应该找什么，我建议先读一本关于javascript的基础教程，然后再读一本关于jQuery的教程。@BradM想说的是：这绝对是可能的，而且是最容易做到的事情之一。因为你是一个新手，我建议你从jQuery开始，因为你会得到更快的结果。当一个元素被隐藏时，它不会被发布。您应该使用

serialize（）

再次添加它。如果只将可见性设置为“hidden”，则无论如何都应该提交它。您可能还希望将高度设置为0，但不要弄乱您的屏幕layout@MahanGM：jQuery的隐藏函数与*.css（'display'，'none'）的功能完全相同，因此您的更改不会解决根本问题。删除显示：无，改为使用可见性：隐藏和高度：0。我认为隐藏的元素也会被发布。。但如果它有显示：无，那么它不会。但是需要验证。。另外，例如，如果您在输入上有一个包装器，则除非您在输入元素本身上放置display:none，否则将发布test。。（也需要验证）

$(document).ready(function () {
    var changeTextBox = function () {
        /** Your code goes here */
    };

    // add the onchange event to all selects (for the current one and future ones)
    $(document).on("click", "select.replaceableSelect", changeTextBox);

    var currentId = 0,
        currentSelect = $("#Id\\.0");
    $("#addButton").on("click", function (e) {
        // hide the old select
        currentSelect.addClass("invisible");
        // create the new select with increased id and add onchange event
        currentSelect = $('<select class="replaceableSelect" id="Id.' + (++currentId) + '"><option name="two" value="two">Two</option></select>').insertAfter(currentSelect).bind("change", changeTextBox);
    });
});

.invisible{
    visibility: hidden;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    border: none;
}