0

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

在这里，我尝试使用 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>
4

3 回答 3

2

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

$(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>');
  });
});

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

于 2013-05-15T07:10:27.553 回答
1

你想复制原来的吗？看看这个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());
    }
});

如果你想添加一个differenct select，改变$(this).clone()你想要的，但是添加.targetclass

这会将 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);
    }
});
于 2013-05-15T07:19:53.727 回答
1

根据第一个和第二个选择，我将有 3 个可见<select>，其中第 2 个和第 3 个都<option>不同<optgroup>。display: none为这些设置一个 css 并存储值<optgroup>的data-select-valueorID关联。

然后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>
于 2013-05-15T07:59:04.180 回答