javascript - 动态添加下拉和下拉字段

Question

编辑 001:

补充说: - event.preventDefault(); 和 anchor 而不是按钮

<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

将按钮更改为 anchor :

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