Question

好的，如果选择了上一个选择框选项，我希望能够添加另一个具有相同选项的选择框。如果取消选择，则删除最后一个选项框w / options。

以下是我正在尝试的内容，我可以使用第一个选择框添加/删除另一个选择框，但我无法使用新创建的选择框。

var counter = 1; // as we already have the first dropdown

function populate(selector) {
  $(selector)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

populate('#select_options_1');

$("#select_options_" + counter).change( function() {
    var addNewSelect = $(this).val() != '';

    if(addNewSelect) {  
        counter++;      
        var newSelectOption = $(document.createElement('select')).attr("id", 'select_options_' + counter);

        newSelectOption.html('<option value="">Please Select an Option</option>' +
                             '<option value="foo">foo</option>' +
                             '<option value="bar">bar</option>');

        newSelectOption.appendTo("#select_option_groups");

    } else {
        $('#select_options_' + counter).remove();
        if(counter > 1) {
          counter--;
        } 
    }
    alert('Add New Select? ' + addNewSelect + ' Counter ' + counter);
});

HTML

<div name="select_option_groups" id="select_option_groups">
    <select name="select_options_1" id="select_options_1">
        <option value="">Please Select an Option</option>
    </select>
</div>

上面的示例代码：http://jsfiddle.net/RaHhY/31/

Answer 1

看看这个......

http://jsfiddle.net/RaHhY/34/

您正在为id而不是为每个select设置更改处理程序。

Answer 2

这是一个较短的解决方案，不确定您是否感兴趣：

$(function(){
    var counter = 2;
    var onChange = function(e){
        val = $(':selected',this).val() || '';
        if (val != ''){
            // they may be able to toggle between valid options, too.
            // let's avoid that using a class we can apply
            var c = 'alreadyMadeASelection';
            if ($(this).hasClass(c))
                return;
            // now take the current select and clone it, then rename it
            var newSelect = $(this)
                .clone()
                .attr('name','select_options_'+counter++)
                .appendTo($(this).parent())
                .change(onChange);
            $(this).addClass(c);
        } else {
            var id = $(this).attr('name').match(/\d+$/), parent = $(this).parent();
            $(this).remove();

            // re-order the counter (we don't want missing numbers in the middle)
            $('select',parent).each(function(){
                var iid = $(this).attr('name').match(/\d+$/);
                if (iid>id)
                    $(this).attr('name','select_options_'+(iid-1));
            });
            counter--;
        }
    };
    $('#select_option_groups select').change(onChange);
});

鉴于以下内容：

<div id="select_option_groups">
    <select name="select_options_1">
        <option value="" selected>Please select an option</option>
        <option value="foo">Foo</option>
        <option value="bar">Bar</option>
    </select>
</div>

<强> Demo

更新

对于更短的代码来说太多了：傻笑：无论如何，这是一个有一些基本改进的更新：

它将使用相同的选择列表HTML代码（可维护我只对HTML选择进行更改，而不是HTML和javascript。
您可以删除列表末尾，中间，开头的选项 - 无关紧要。该列表将自动重新排序并递减计数器。
项目在初始选择后可以修改，而不会对列表产生任何影响。（之前，如果您选择了foo然后返回并选择了条，它会添加一个新条目，即使它不是一个“新”值（只是修改过的一个））

如果选择了当前选择/选项，则使用/选项添加/删除新选择

2 个答案:

更新