Question

<div class="deals_options">
    Choose: 
    <?php
    echo '<select name="chosen_options[]">';
    foreach($deals_options as $option)
    {
    echo '
    <option value="'.$option['value'].'">'.$option['displaytext'].'</option>
    ';
    }
    echo '</select>';
    ?>
</div>

This is what I currently have. This outputs a select presenting the options that exists for this deal offer, you can select between.

Now for the deal offer, you can also select how many of the deal offers you want. And I would like to do so it shows as many selectors as you have chosen deal offers.

E.g if you picked 3 in the How many deal offer, then it should show 3 of the selectors where you can choose.

Here’s a example:

http://jsfiddle.net/LWayp/

This is not working, so when you select a amount nothing happens, but as you can see the HTML/output is how i wish it to work. When you choose 3, it shows 3 of those selectors.

Answer 1

Edit: See below code in case if you want to add/remove from the DOM, DEMO

  $('.deals_amount').change(function() {
    var amount = $(this).val();
    var selectCount = $('.deals_options select').length;
    if (amount < selectCount) { //remove
        $('.deals_options select:gt(' + (amount - 1) + ')').remove();
    } else {
        var $orig = $('.deals_options select:first');
        for (var i = 0; i < Math.abs(amount - selectCount); i++) {
            $orig.clone().insertAfter('.deals_options select:last');
        }
    }
}).change(); //<-- Triggered on load to populate with what it was set

Or Alternatively you can show/hide based on deals_amount selection,

DEMO

    $('.deals_options select').each(function () {
        if ($(this).index() < amount) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });