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

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

hidden次に、必要な要素を非表示にするための css クラスが必要です。他の人が言ったよう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();"/>

sを使用した基本的な例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 に答える