動態添加下拉列表和下拉字段

Question

編輯001：

添加： event.preventDefault(); 和錨點而不是按鈕

<div class="edit-area">
 <div class="controls">
    <a href="#" class="add">+</a>
    <a href="#" class="rem">-</a>
 </div>
</div>

現在頁面+或-不會使頁面發送表單，但是現在它什么都不做：s

---

我正在使用聯系表格，但是我有一些問題。

• 我想在按下按鈕（+）時動態添加字段
• 當然，他們需要能夠在需要時將其刪除...（-）

當我現在按+按鈕時，它會嘗試像“提交”按鈕並發送表格...

腳本

<script>
        (function($) {
            "use strict";

            var itemTemplate = $('.example-template').detach(),
                editArea = $('.edit-area'),
                itemNumber = 1;

            $(document).on('click', '.edit-area .add', function(event) {
                var item = itemTemplate.clone();
                item.find('[project]').attr('project', function() {
                return $(this).attr('project') + '_' + itemNumber;
            });
            ++itemNumber;
            item.appendTo(editArea);
        });

        $(document).on('click', '.edit-area .rem', function(event) {
            editArea.children('.example-template').last().remove();
        });

        $(document).on('click', '.edit-area .del', function(event) {
            var target = $(event.target),
            row = target.closest('.example-template');
            row.remove();
        });

    }(jQuery));
</script>

HTML

<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="POST" name="contact">
    <div class="row uniform 50%">
        <div class="6u 12u(mobilep)">
            Your personal card number
            <input type="text" name="card2" id="card" value="<?php echo $_SESSION['username']; ?>" placeholder="Card Number" readonly/>
        </div>
        <div class="6u 12u(mobilep)">
            Your name
            <input type="text" name="name2" id="name" value="<?php echo $_SESSION['realName']; ?>" placeholder="Your name" readonly/>
        </div>
    </div>
    <div class="row uniform 50%">
            <div class="6u 12u(narrower)">
                Order tickets for a project.
            </div>
    </div>
<div class="example-template">
    <div class="row uniform 50%" id="readroot">
            <div class="4u 12u(narrower)">
            <select name="project" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
            <option disabled selected>Select a project</option>
                <option value="Smile">Project Smile</option>
                <option value="Sand">Project Sand</option>
                <option value="Schmuck">Project Schmuck</option>
            </select>
            </div>
            <div class="4u 12u(narrower)">
            <select id="ddl2" name="date">
                    <option disabled selected>Select a date</option>
            </select>
            </div>
            <div class="2u 12u(narrower)">
            <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' name="amount" id="currentamount" value="" placeholder="Amount" />
            </div>
        </div>  
        <div class="edit-area">
        <div class="controls">
            <button class="add">+</button>
            <button class="rem">-</button>
        </div>
    </div>
    <div class="row uniform 50%">
        <div class="6u 12u(mobilep)">
            <input type="hidden" id="currentprice" value="10" />
        </div>
    </div>          
        <div class="6u 12u(mobilep)">
            <input type="hidden" id="nextprice1" value="10" placeholder="" />
        </div>
    </div>
    <div class="row uniform">
        <div class="12u">
        </div>
    </div>
        <div class="4u 12u(mobilep)">   
        Total price.(In EUR)
        <input type="text" name="total2" id="total" value=""  readonly/>
    </div>

    <div class="row uniform">
        <div class="12u">
            <ul class="actions align-center">
                <li><input type="submit" name="submit"value="Place Order"/></li>
            </ul>
        </div>
    </div>
</form>

表格圖片（此處未顯示ID和名稱）

Answer 1

將按鈕更改為錨點：

<a href="#" class="add">+</a>
<a href="#" class="rem">-</a>

然后在您的javascript中，單擊時，請確保調用preventDefault()以阻止其行為像標准鏈接一樣。

$(document).on('click', '.edit-area .rem', function(event) {
    event.preventDefault();
    editArea.children('.example-template').last().remove();
});

$(document).on('click', '.edit-area .del', function(event) {
    event.preventDefault();
    var target = $(event.target),
    row = target.closest('.example-template');
    row.remove();
});

我認為，您也可以在按鈕上添加一種type ，這樣它就不會默認為submit類型（但不要在其上引用我）：

<button type="button" class="add">+</button>