Javascript 如果上一个选择了选项，则显示下一个选择元素

我对jQuery/Javascript不是很实用，如果我手动指定每个ID，我知道怎么做，但我知道这不是一个好的使用方法

我正在寻找一种在jQuery中完全动态的方法，即如果一个select元素（最初为空值）选择了一个选项（值不是空的），那么它将使用相同的类显示下一个select

前

这就是HTML：

<div id="sel1" class="sel" style="display: block;">
    <select id="select1">
        <option selected value>Default Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

<div id="sel2" class="sel">
    <select id="select2">
        <option selected value>Default Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

<div id="sel3" class="sel">
    <select id="select3">
        <option selected value>Default Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

因此，页面基本上从显示的第一个sel1开始

如果我选择了一个值不为空的选项（例如Option1），它会自动向我显示下一个类为sel的div（id=sel2）

如果我在sel2中选择了一个不为空的选项，它会自动显示具有类sel（id=sel3）的下一个div

如果我在sel3中选择了一个不为空的选项，它将停止，因为没有具有类sel的下一个div

也许是这样：

$（'select[id^=select]'）。在（'change'，function（）上{
如果（$（this.val（）.length>0）{
$（this）.closest（'div.sel'）.next（'div.sel'）.css（'display'，'block'）；
}
});
.sel{
显示：无；
}

默认选项
选择1
选择2
默认选项
选择1
选择2
默认选项
选择1
选择2
也许是这样：


$（'select[id^=select]'）。在（'change'，function（）上{
如果（$（this.val（）.length>0）{
$（this）.closest（'div.sel'）.next（'div.sel'）.css（'display'，'block'）；
}
});
.sel{
显示：无；
}

默认选项
选择1
选择2
默认选项
选择1
选择2
默认选项
选择1
选择2
就是这样：


$（'select'）。在（'change'，function（）上{
var nxt=$（this.parent（'div'）.next（），//下一个元素（div）
opt=$（this.val（）；
控制台日志（opt）；
如果（选择！=''）{
nxt.removeClass（'sel'）；
}否则{
nxt.addClass（'sel'）；
}
});
.sel{
显示：无；
}

默认选项
选择1
选择2
默认选项
选择1
选择2
默认选项
选择1
选择2
就是这样：


$（'select'）。在（'change'，function（）上{
var nxt=$（this.parent（'div'）.next（），//下一个元素（div）
opt=$（this.val（）；
控制台日志（opt）；
如果（选择！=''）{
nxt.removeClass（'sel'）；
}否则{
nxt.addClass（'sel'）；
}
});
.sel{
显示：无；
}

默认选项
选择1
选择2
默认选项
选择1
选择2
默认选项
选择1
选择2
谢谢，很好的方法。一个问题：使用“最近的”还是“父级”更好？我认为在这种情况下，父函数更合适。@Keaire我使用了最接近的函数，因为无论您如何更改标记（HTML），它都会/应该始终有效。但这并没有什么区别。他们都很快。谢谢，很好的方法。一个问题：使用“最近的”还是“父级”更好？我认为在这种情况下，父函数更合适。@Keaire我使用了最接近的函数，因为无论您如何更改标记（HTML），它都会/应该始终有效。但这并没有什么区别。他们都很快。
.sel {
    display: none;
}