javascript - 如果前一个选择了选项，则显示下一个选择元素

Question

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

我正在寻找一种在 jQuery 中完全动态的方法，如果选择元素(最初为空值)选择了一个选项(值不为空)，它会显示具有相同类的下一个选择。

例如。

这就是 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>

这就是 CSS:

.sel {
    display: none;
}

1. 因此，页面基本上从显示的第一个 sel1 开始。
2. 如果我选择一个值不为空的选项(例如 Option1)，它会自动显示下一个具有 sel 类 (id=sel2) 的 div。
3. 如果我在 sel2 中选择一个不为空的选项，它会自动显示下一个带有 sel 类 (id=sel3) 的 div
4. 如果我在 sel3 中选择一个不为空的选项，它就会停止，因为没有下一个具有 sel 类的 div。

Answer 1

也许像这样:

$('select[id^=select]').on('change', function(){
    if($(this).val().length > 0) {
        $(this).closest('div.sel').next('div.sel').css('display', 'block');
    }
});

.sel {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>