从动态添加的选择中删除所选选项

时间:2013-10-05 17:57:37

标签: jquery select dynamic

我正在动态添加包含选择选项的多个div,并希望删除在下一个选择框中首先选择时选择的选项。

请在此处查看jdfiddle:http://jsfiddle.net/MSvje/

<div class="center">
    <div class="row-fluid">
        <div class="span3">
            <select class="chosen-select" id="form-field-select-3" data-placeholder="Choose a Country...">
                <option value="">Text</option>
                <option value="AL">Department</option>
                <option value="AK">City</option>
                <option value="AZ">State</option>
                <option value="AR">Country</option>
                <option value="CA">Industry</option>
            </select>
        </div>
    </div>
</div>
<a href="javascript:void(0);" id="search-add"><i class="icon-plus">Add One</i></a>
<br />
<a href="javascript:void(0);"  id="search-remove"><i class="icon-minus">Remove One</i></a>

Js CODE:

jQuery(function($) {
        $("#search-add").click(function () {
            if( ($('.center .row-fluid').length+1) > 5) {
                alert("Only 5  allowed");
                return false;
            }
            var id = ($('.center .row-fluid').length + 1).toString();
            $('.center').append('<div class="row-fluid"><div class="span3"><select class="chosen-select" id="form-field-select-3" data-placeholder="Choose a Country..."><option value="">Text</option><option value="AL">Department</option><option value="HI">City</option><option value="HI">State</option><option value="HI">Country</option><option value="HI">Industry</option></select></div>'); 
                });

                $("#search-remove").click(function () {
                    if ($('.center .row-fluid').length == 1) {
                        alert("No more textbox to remove");
                        return false;
                    }
                    $(".center .row-fluid:last").remove();
                });
            });

1 个答案:

答案 0 :(得分:1)

您遇到多个ID问题。 Id必须是唯一的。

试试这个:

var clone = $('.row-fluid').last().clone();
clone.find('#form-field-select-3').prop('id','clone_'+ids);
clone.find('option:selected').remove()

演示here