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()是children()的{{1}}（即select元素），而不是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

Answer 2

请看一下附件摘录。

问题出在append()函数用法中。您使用了children().append()，这可能是代码无效的原因。

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').append(gameETS);
    $('#Arrival').children().append(gameETS);
  } else {
    $('#Departure').append(gameATS);
    $('#Arrival').children().append(gameATS);
  }
});

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

Answer 3

我想要发生的是如果第一个选择值是ETS然后只有第二个选择中的选项显示它们的数据游戏属性是ETS，如果它的ATS只显示ATS。

此外，您只需显示data-game等于#Game option值的选项即可。

$("#Game").on('change',function() {
  $('select option:selected').each(function () {
    var val = $(this).val();
    $('#Departure option[data-game=' +val+ ']').attr('selected', 'selected');
  });
});

$("#Game").on('change',function() {
  $('select option:selected').each(function () {
    var val = $(this).val();
    $('#Departure option[data-game=' +val+ ']').attr('selected', 'selected');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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 4

我选择将数据放入数组中并生成＆＃34;生成＆＃34; javascript中的选项。这些选项可以自动生成＆＃34;使用其他一些框架knockout或angularjs。

以下是jQuery和lodash的解决方案：

＆＃13;

var departures = [
  { value: 1, text: "Cambridge", game: "ETS" },
  { value: 2, text: "Las Vegas", game: "ATS" }
];

$(document).ready(function(){
  $("#Game").on("change", function() {
    var value = $(this).val();
    var selection = _.filter(departures, function(item) {
      return item.game == value;
    });
    
    $("#Departure").empty();
    
    _(selection).forEach(function(item) {
      $("#Departure").append('<option value="' + item.value +'" data-game="' + item.game +'">' + item.text +'</option>');
    });
  }).change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.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>

＆＃13;

Answer 5

试试这个：

$("#Game").change(function() {
  var value = $(this).val();

  $('#Departure option').each(function() {
      if($(this).attr('data-game') == value) {
          $(this).show();
      } else {
          $(this).hide();
      }
  });
});

在secound中显示选项，基于第一个使用数据属性

5 个答案: