Question

我有一个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，点击此按钮隐藏和替换此字段？谢谢！

Answer 1

使用jQuery可能有所帮助。

elmCount = 0;

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

感谢评论。

Answer 2

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

Answer 3

作为@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的基本示例：http://jsfiddle.net/5Dayf/1/

Answer 4

我眼中最干净的解决方案：见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;
}

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

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

4 个答案: