7

我有一个关于删除当前元素之后的所有元素的问题。

这是场景：

我有一个位置树，我的用户需要遍历它才能获得特定值。我有一个通过 ajax 加载顶级位置的 SELECT。为了缩小选择范围，数据具有更精细的值，因此我根据用户选择的内容添加了一个新的 SELECT。当用户到达数据可用选项的末尾时，我停止添加 SELECT 并获取最后一个的值，这就是我所追求的。

我编写代码的方式是从一个 SELECT 开始，该 SELECT 具有硬连线的顶级位置 ID，然后有一个“onchange”事件处理程序，该处理程序输出到我的数据库并获取该选择的子项，然后创建新的在当前 TD 内选择。

这种情况一直持续到最后一个选择没有孩子返回。那时，我可以得到这个最终位置的 ID。

这很有效，直到用户决定改变一两个选择“上游”的东西。

下面是一个从位置树下来的用户可能有什么的说明（这些是代码中的 SELECT）：

美国 -> 俄亥俄州 -> 凯霍加 -> 克利夫兰 -> 1 区

如果“地区 1”是此位置链中的最后一个可用项目，我可以使用 $('#locations select:last').val() 获取它。奇妙吧。

如果用户决定“嗯，不，我追求的不是 Cuyahoga，而是 Stow”，并更改第三个选择选项，则效果不佳的情况。我需要做的是在具有“Cuyahoga”的选择之后删除所有选择，因为我现在必须为“Stow”获取任何进一步的数据。先前选择之后的任何选择都不再有效。

正在操作的 select 在 onchange 事件中传递自身，以便我拥有当前元素。我试过 $(elem).after().remove()，但这不起作用。

关于如何在当前选择之后删除所有选择的任何想法？

谢谢！

文档的结构如下所示：

<table border id="loctable">
  <tr><th>Location:</th><td><select id="loc0" onchange="return UpdateLocationSelect(this);">
    <option>choose..</option>
    <option value="3">USA</option>
    </select>
  </td>
  </tr>

[剪辑]

function UpdateLocationSelect(elem) {
    // load sub locations for PPID given. IN this case, locations under USA. add options to elem
    // Also, erase any selects after this one, in case the user has "backed up" his selection

    $(elem).next().remove();  // Help needed here!! how to remove any SELECTs after this one??

    $.ajax({
        url: "api.php",
        dataType: "json",
        data: { cmd: "sublocs", "pid": elem.value },
        async: false,
        success: function( data, textStatus ) {
            // results
            if( $(data).length ) {
                $('#loctable td').append( "<select onchange='return UpdateLocationSelect(this);'><option>choose..</option></select>");
                $.each( data, function( key, val ){
                    $('#loctable select:last').append( '<option value="'+key+'">'+val+'</option>' );
                });
            }
            else
            {
                // we've hit the end of this location branch. Alert to check val is right
                alert( "LocID: " + $('#loctable select:last').val() );
            }
        },
      });
      return false;
    }
4

2 回答 2

23 
$(elem).nextAll().remove();

如果您需要指定一个选择器，您可以使用相同的方法来完成。

$(elem).nextAll('select.some-class').remove();
于 2012-07-09T22:12:28.120 回答
0

要删除当前选择之后发生的那些选择，只需使用：

var curSelect = $('select').index('select');
$('select').gt(curSelect).remove();

将选择器传递给index()意味着它将查找文档中与该选择器匹配的所有元素，而不是从其兄弟元素中提供该元素的索引。

gt()查找初始选择器返回的所有元素，其索引大于curSelect变量传入的索引，在这种情况下，将它们传递给remove()方法。

参考：

于 2012-07-09T22:14:42.480 回答