Question

I am stuck on a problem where I want to remove all the list that fall after selected list.
I have created JS Fiddle here but it doesn’t work. For example, if I select item from first drop-down then next two should removed, or if I select from second drop-down then third should be removed.

HTML

<div id='levels'>
<select id="level" class="parent" name="data[level][]">
    <option value="1">1</option>
<option value="2">2</option>
    </select>
    <select id="level" class="parent" name="data[level][]">
    <option value="3">3</option>
<option value="4">4</option>
    </select>
 <select id="level" class="parent" name="data[level][]">
    <option value="5">5</option>
<option value="6">6</option>
    </select>   
    </div>

Javascript

$("#levels").on('change', function() {
    $(this).nextAll().remove();

    });​

I want to achieve this without assigning different class names or div names to each list.

Cakephp Code

Master File

<script type="text/javascript">
$(document).ready(function() {


 $("select").on('change', function() {
    $(this).nextAll('select').remove();
        $("<div>").load('/dashboard/details/show_levels',function() {
    $("#levels").append($(this).html());

});
})


<div id=levels>

    <?php echo $form->input('level',array('options'=>$level,'type'=>'select','scroabble'=>true,'multiple'=>true, 'class'=>'parent')); ?>
</div>


});

show_levels

<?php
$abc=array('a','b','c','d');
echo $form->input('level',array('options'=>$abc,'type'=>'select','scroabble'=>true,'multiple'=>true, 'class'=>'parent')); ?>

---

Update:

Follwing solution worked for me

Replaced

 $(this).nextAll('select').remove();

with

$(this).parents().nextUntil().remove();

Not sure how it worked, and whats the difference between two.

Answer 1

Follwing solution worked for me

Replaced

 $(this).nextAll('select').remove();

with

$(this).parents().nextUntil().remove();

Not sure how it worked, and whats the difference between two.