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

Hide an HTML form field when a button is clicked and replace it with a different field

本文关键字：字段 替换 其他 隐藏 HTML 表单 单击 按钮      更新时间：2023-09-26

我有一个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));
}

作为@MahanGM答案的替代方案，我将尽量减少在这里使用jQuery，并在addQual函数中只执行以下操作：

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

然后，您需要一个css类hidden来隐藏所需的元素。正如其他人所说，如果您不想丢失输入的值，就不能使用display: none。

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

当您在标记中同时出现两个select时，只有您最初想要隐藏的一个具有适当的类：

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

span s的一个基本示例：http://jsfiddle.net/5Dayf/1/

我眼中最干净的解决方案：请参阅此处jsFiddle

HTML，没有什么特别之处：

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

使用jQuery:的Javascript

$(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);
    });
});

CSS：

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

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

相关文章：