创建字段集的按钮

时间:2018-11-29 14:51:56

标签: jquery html css

<html>
<head>
    <title>Results Sheet</title>
</head>

<body>
    <form>
        <fieldset id="ResultSheet">
                <legend>Add Event</legend>
                <div class="newEvent">
                    Event: <br>
                <select name="Events" id="Events">
                    <option disabled selected value> --SELECT AN OPTION BELOW-- </option>
                    <option value="100 Metres">100 Metres</option>
                    <option value="200 Metres">200 Metres</option>
                    <option value="300 Metres">300 Metres</option>
                    <option value="400 Metres">400 Metres</option>
                    <option value="800 Metres">800 Metres</option>
                    <option value="1500 Metres">1500 Metres</option>
                    <option value="400 Metres">400 Metres</option>
                    <option value="Hurdels">Hurdels</option>
                    <option value="Shot Put">Shot Put</option>
                    <option value="Discus">Discus</option>
                    <option value="Javelin">Javelin</option>
                    <option value="Long Jump">Long Jump</option>
                    <option value="High Jump">High Jump</option>
                    <option value="Triple Jump">Triple Jump</option>
                    <option value="4x100 Metres Relay">4x100 Metres relay</option>
                </select>
            </div>
            <input type="button" id="addEvent" name="addEvent" value="Add Event" />
        </fieldset>


    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="newButtons.js"></script>
</body>

该HTML使用jQuery创建带有下拉菜单的菜单集,然后使用按钮创建另一个事件,如下所示:

jQuery(function($){
var $button = $('#addEvent'),
    $row = $('.newEvent').clone();

$button.click(function(){
    $row.clone().insertBefore( $button );
});

});

我想在右上角添加一个用于创建/显示字段集的按钮,以便每次单击它都会创建一个新的字段表。同样,当该站点首次启动时,将不存在任何字段集,并且在出现该字段之前必须先按下右上角的按钮。

0 个答案:

没有答案