1

所以我有这两个带有选择标签的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>

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

4

2 回答 2

1

您正在 select for 中搜索.videoDetails。你需要找到你的范围。例如

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

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

于 2019-09-16T21:18:35.690 回答
0

几个问题。您正在内部搜索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>

于 2019-09-16T21:21:13.957 回答