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

【问题标题】：Show next select element if the previous one have an option selected如果前一个选择了选项，则显示下一个选择元素
【发布时间】：2017-09-30 08:25:22
【问题描述】：

我对 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;
}

所以，基本上页面从显示的第一个 sel1 开始。
如果我选择了一个值不为空的选项（例如 Option1），它会自动显示下一个 sel 类 (id=sel2) 的 div。
如果我在 sel2 中选择了一个非空选项，它会自动显示下一个 sel 类 (id=sel3) 的 div
如果我在 sel3 中选择了一个不为空的选项，它会停止，因为没有下一个具有 sel 类的 div。

【问题讨论】：

标签： javascript jquery

【解决方案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>

【讨论】：

谢谢，很好的方法。一个问题：最好使用最接近或父母？我认为在这种情况下，父函数更合适。
@Keaire 我使用了最接近的原因，无论您如何更改标记 (HTML)，它都会/应该始终有效。但实际上并没有什么不同。他们都很快。

【解决方案2】：

就是这样：

$('select').on('change', function(){
      
  var nxt = $(this).parent('div').next(), // next element (div)
      opt = $(this).val();
  
  console.log( opt );
  
  if( opt != '' ){

      nxt.removeClass('sel');

  } else {
  
      nxt.addClass('sel');
  
  }

});

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

【讨论】：