Question

所以我有两个带有select标签的div。

$('.selectedMediaType').change(function() {
  if ($(this).val() === 'video') {
    $(this).find('.videoDetails').html('some options will be added here');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
  <select name="form-0-type" class="selectedMediaType">
    <option value="video">video</option>
    <option value="audio">audio</option>
  </select>
</div>

<div class="col-sm-3">
  <select name="form-0-resolution" class="videoDetails"></select>
</div>

所以想法是，如果第一次选择的值发生变化，那么我将为第二次选择标签动态添加选项。但是，这不起作用。如何更改值videoDetails的第一个selectedMediaType。

Answer 1

您正在选择中搜索.videoDetails。您需要找到您的范围。例如

$(this).closest('.div').next('div').find('.videoDetails').html('some options will be added here');

尽管我会通过添加属性使其更加具体，以防dom发生变化。

Answer 2

几个问题。您正在selectedMediaType内搜索其他下拉列表。显然，它没有找到它。

此外，您需要像我的演示中一样添加选项。

$('.selectedMediaType').change(function() 
{
    var $videoDetails = $('.videoDetails');
    $videoDetails.empty();
    switch( $(this).val() )
    {
      case 'audio' :
        $videoDetails.append( $("<option />").attr("value", 1).html("Cat") );
        $videoDetails.append( $("<option />").attr("value", 2).html("Dog") );
      break;

      case 'video' :
        $videoDetails.append( $("<option />").attr("value", 1).html("One") );
        $videoDetails.append( $("<option />").attr("value", 2).html("Two") );
      break;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
  <select name="form-0-type" class="selectedMediaType">
    <option value="video">video</option>
    <option value="audio">audio</option>
  </select>
</div>

<div class="col-sm-3">
  <select name="form-0-resolution" class="videoDetails"></select>
</div>

兄弟div中元素的Jquery选择器

2 个答案: