1

我遇到了一个问题,我想删除选定列表之后的所有列表。我在这里创建了JS Fiddle,但它不起作用。例如,如果我从第一个下拉菜单中选择项目,那么接下来的两个应该被删除,或者如果我从第二个下拉菜单中选择,那么第三个应该被删除。

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

    });​

我想在不为每个列表分配不同的类名或 div 名称的情况下实现这一点。

Cakephp 代码

主文件

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


});

显示级别

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

更新:

以下解决方案对我有用

更换

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

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

不知道它是如何工作的,两者之间有什么区别。

4

4 回答 4

4

试试这个

$("select").on('change', function() {
$(this).nextAll('select').remove();
});​  

小提琴

于 2012-10-17T05:03:18.133 回答
2

正如您所说的“隐藏”,我不确定您是否想要remove它们,但是要change用于您的场景,您可以使用以下内容:

$(document).ready(function () {
    $("#levels").on("change", ".parent", function () {
        $(this).nextAll().hide();
    });
});

顺便说一句,你的<select>元素需要有独特的id属性,并不是所有的都有“级别”。

对我来说更有意义的事情是这样的:

http://jsfiddle.net/HRh2d/

于 2012-10-17T05:05:55.253 回答
1

以下解决方案对我有用

更换

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

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

不知道它是如何工作的,两者之间有什么区别。

于 2012-10-19T13:15:31.633 回答
-1

尝试 .siblings() 而不是 nextAll

此外,您的选择应该有唯一的 ID

于 2012-10-17T05:04:48.150 回答