0

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

4

4 回答 4

1

这与 jQuery 可能会有所帮助。

elmCount = 0;

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

感谢评论。

于 2013-07-29T19:21:20.077 回答
0 
<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));
}
于 2013-07-29T19:32:19.773 回答
0

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

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

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

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

并且您从两个selects 都存在的标记开始，只有您最初想要隐藏的那个具有适当的类：

<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/

于 2013-07-29T19:40:33.493 回答
0

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

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

于 2013-07-29T20:09:51.310 回答