Question

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

这就是CSS：

.sel {
    display: none;
}

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

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>

Answer 2

这就是：

＆＃13;

$('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');
  
  }

});

＆＃13;

.sel {
  display:none;
}

＆＃13;

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

＆＃13;

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

2 个答案: