CODEWITHSUNDEEP
javascriptjqueryhtml
Lahiruzz
Lahiruzz

Reputation: 665

Add dynamic option selection list in jquery

I need to add selection menu dynamically.That means when user select on option from selection menu it add new new selection menu and when user select option from new selection menu, it should again add new option menu.

Here I have tried using Jquery. but it double selection menu. and it only work for first selection menu.how can I change this code to meet my requirement?. 

<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>

Upvotes: 0

Views: 5716

Answers (3)

Robin Castlin
Robin Castlin

Reputation: 10996

I would have 3 visible <select> where the 2nd and 3rd one has all <option> in different <optgroup> based on 1st and 2nd choise. Have a css display: none for these <optgroup> and store data-select-value with the ID or association of the values.

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

This example asumes that you have:

<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>

Upvotes: 1

Steely Wing
Steely Wing

Reputation: 17597

Do you want to duplicate the original one? have a see at this http://jsfiddle.net/steelywing/jJknp/

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

If you only want to add when last select is selected, try this http://jsfiddle.net/steelywing/jJknp/2/

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

If you want to add a differenct select, change $(this).clone() to what you want, but add .target class to it

This will add 2 to new 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);
    }
});

Upvotes: 1

bipen
bipen

Reputation: 36531

use on delegated event for dynamically added element

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

delegating it to document works..however , it is recommeneded to delegate it to the closest static parent container performancewise.

Upvotes: 2

Related Questions