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

1番目と 2 番目のチョイスに基づい<select>て、2 番目と 3 番目のものがすべて<option>異なっているところに3 つが表示されます。これら<optgroup>の cssを用意し、値の関連付けまたは関連付けを使用して保存します。display: none<optgroup>data-select-valueID

次に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 に答える