jquery - 基于第一个使用数据属性的第二个选择中显示选项

Question

这是我当前的代码。我想要发生的是，如果第一个选择值是 ETS，那么只有第二个选择中的选项显示其数据游戏属性是否为 ETS，否则如果其 ATS，则仅显示 ATS。

var gameETS = $('#Departure').children("option[data-game=ETS]").clone();
var gameATS = $('#Departure').children("option[data-game=ATS]").clone();

$("#Game").change(function() {
  var value = $(this).val();
  $('#Departure').children().remove();
  $('#Arrival').children().remove();
  if (value == "ETS") {
    $('#Departure').children().append(gameETS);
    $('#Arrival').children().append(gameETS);
  } else {
    $('#Departure').children().append(gameATS);
    $('#Arrival').children().append(gameATS);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="form-control" id="Game" name="Game" required>
  <option value="ETS">Euro Truck Simulator</option>
  <option value="ATS">American Truck Simulator</option>
</select>

<select class="form-control" name="Departure" id="Departure" required>
  <option value="1" data-game="ETS">Cambridge</option>
  <option value="2" data-game="ATS">Las Vegas</option>
</select>

Answer 1

您的问题是您的 append() 是 select 的 children() (即 option 元素)而不是 select 本身。另请注意，通过使用 empty() 并加入选择器，您可以使逻辑变得更加简单。试试这个:

var $gameETS = $('#Departure option[data-game=ETS]').clone();
var $gameATS = $('#Departure option[data-game=ATS]').clone();

$("#Game").change(function() { 
    $('#Departure, #Arrival').empty().append($(this).val() == "ETS" ? $gameETS : $gameATS);
}).change(); // call change on load to set the values immediately

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="Game" name="Game" required>
  <option value="ETS">Euro Truck Simulator</option>
  <option value="ATS">American Truck Simulator</option>
</select>

<select class="form-control" name="Departure" id="Departure" required>
  <option value="1" data-game="ETS">Cambridge</option>
  <option value="2" data-game="ATS">Las Vegas</option>
</select>