-2

フォームにroomfac1というドロップダウンがあり、ユーザーが[追加]ボタンをクリックしたときにroomfac2、roomfac3 ...（重複したドロップダウン）を追加したいと思います。jQueryを使用してこれを達成するにはどうすればよいですか？これに加えて、新しく作成された入力も動的に削除してほしいと思います。

ここにコードをアップロードしました：http：//jsfiddle.net/ecRXP/2/

<select name="roomFac1" id="roomFac1">
  <option selected="selected">Any</option>
</select>
<input type="button" value="Add" class="pmbtn" id="addFac"/>
<input type="button" value="Remove" class="pmbtn" id="removeFac"/>
4

3 に答える 3

3 
$(document).ready(function(){
    $('#addFac').click(function(){
        var $objs = $('select[name*=roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'roomFac'+n).attr('id', 'roomFac'+n);
        $obj.appendTo($('body'));
    });
    $('#removeFac').click(function(){
        var $objs = $('select[name*=roomFac]');
        if($objs.size() > 1){
           $objs.last().remove();
        }
    });
});

そしてここにフィドルがあります：http：//jsfiddle.net/kfm5b/2/

于 2013-02-14T00:14:10.567 に答える
1

jsFiddleの例。

HTML：

<form>
    <div class="add">
        <a href="#" id="add">Add</a>
    </div>
    <div class="row">
        <select name="roomFac1" id="roomFac1">
            <option selected="selected">Any</option>
        </select>
    </div>
</form>

JS：

var $form = $("form"),
    $firstRow = $(".row:first"),
    totalRows;

$("form").on("click", ".delete", function (e) {
    e.preventDefault();

    $(this).closest("div").remove();
});

$("#add").on("click", function (e) {
    var $clonedRow = $firstRow.clone(),
        totalRows = "1",
        newNum;

    e.preventDefault();

    totalRows = $(".row").length;
    newNum = parseInt(totalRows, 10) + 1;

    $clonedRow.find("select").attr("name", "roomFac" + newNum);
    $clonedRow.find("select").attr("id", "roomFac" + newNum);
    $clonedRow.append('<a href="#" class="delete">Delete</a>');
    $form.append($clonedRow);
});
于 2013-02-14T00:17:51.980 に答える
1

私はあなたが.cloneこのように使うことができると思います：

var roomFacCount = 1;

$('#addFac').on('click', function() {
    var $lastRoomFac = $('#roomFac' + roomFacCount);
    roomFacCount++;
    $lastRoomFac.after($lastRoomFac.clone(true, true).attr('id', 'roomFac' + roomFacCount));
});

$('#removeFac').on('click', function() {
    if (roomFacCount > 1) {
        var $lastRoomFac = $('#roomFac' + roomFacCount);
        roomFacCount--;
        $lastRoomFac.remove();
    }
});

jsfiddleのデモ

于 2013-02-14T00:31:16.970 に答える