Question

我需要动态添加选择菜单。这意味着当用户从选择菜单中选择选项时，它会添加新的新选择菜单，当用户从新选择菜单中选择选项时，它应该再次添加新选项菜单。

这里我尝试使用Jquery。但它是双选菜单。它只适用于第一个选择菜单。我可以更改此代码以满足我的要求吗？

<html>

    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script>
            jQuery(function ($) {
                $('.target').change(function () {
                    $("select option:selected").each(function () {
                        $('#other').append('<select class="target"><option value="3" selected="selected">option1</option><option value="4" selected="selected">option2</option>  </select>');
                    });
                });
            });
        </script>
    </head>

    <body>
        <form>
            <input class="target" type="text" value="Field 1" />
            <select class="target">
                <option value="1" selected="selected">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </form>
        <div id="other"></div>
    </body>

</html>

Answer 1

在委托事件中使用动态添加元素

$(document).on('change','.target',function() {
     $("select option:selected").each(function () {
         $('#other').append('<select class="target"><option value="3" selected="selected">option1</option><option value="4" selected="selected">option2</option>  </select>');
  });
});

将其委托给文档工作..但是，建议将它委托给性能最接近的静态父容器。

Answer 2

你想复制原版吗？看看http://jsfiddle.net/steelywing/jJknp/

$(document).on('change', '.target', function () {
    $(this).after($(this).clone());
});

如果您只想在选择上一个select时添加，请试试http://jsfiddle.net/steelywing/jJknp/2/

$(document).on('change', '.target', function () {
    if ($(this).is($('.target:last'))) {
        $(this).after($(this).clone());
    }
});

如果您想添加差异select，请将$(this).clone()更改为您想要的内容，但将.target类添加到其中

这会将2添加到新的select，http://jsfiddle.net/steelywing/jJknp/3/

$(document).on('change', '.target', function () {
    if ($(this).is($('.target:last'))) {
        var clone = $(this).clone();
        clone.children('option').each(function () {
            $(this).val(+($(this).val()) + 2);
        });
        $(this).after(clone);
    }
});

Answer 3

我会有3个可见的<select>，其中第2个和第3个根据第1和第2个选择在不同的<option>中拥有所有<optgroup>。为这些display: none设置<optgroup>，并将data-select-value存储为ID或值的关联。

然后jsFiddle：

$(function() {
    var selector = {
        first_select : '#second_select',
        second_select : '#third_select'
    }
    $('#first_select, #second_select').bind('change', function() {
        var h = $(this).val();
        if (h) {
            $(selector[$(this).attr('id')]).find('> optgroup').each(function() {
                $(this).toggle(h == $(this).data('select-value'))
                    .attr('disabled', (h != $(this).data('select-value')));
            });
            $(selector[$(this).attr('id')]).find('option:visible').eq(0).attr('selected', true);
            $(selector[$(this).attr('id')]).show();
        }
    });
});

此示例假设您拥有：

<select id="first_select">
    <option value="">Pick</option>
    <option value="1">One</option>
</select>
<select id="second_select">
    <optgroup data-select-value="1">
        <option value="1_1">Choises appeares</option>
        <option value="1_2">More choises</option>
    </optgroup>
</select>
<select id="third_select">
    <optgroup data-select-value="1_1">
        <option value="1_1_1">Trippin' choises</option>
        <option value="1_1_2">So many choises</option>
    </optgroup>
    <optgroup data-select-value="1_2">
        <option value="1_2_1">Choises!!</option>
        <option value="1_2_2">God, they're everywhere!</option>
    </optgroup>
</select>
<style type="text/css">
    #second_select, 
    #third_select {
        display: none;
    }
</style>

在jquery中添加动态选项选择列表

3 个答案: