Question

我正在尝试进行从属下拉列表，并且无法使用value属性。我发现Codepen完全可以实现我想要的功能，而不是使用值。因此，我将其分叉并将值更改为数据大小，这是行不通的。

我尝试使用$(this).data("size")和一些变体，但可能有语法错误。

<option value="1">Fruit</option>


<option data-size="1">Fruit</option>

使用值https://codepen.io/bahiirwa/pen/OjNYZb的Codepen

使用数据大小https://codepen.io/twiddly/pen/VJZgxZ

的Codepen

数据大小代码笔中的下拉列表仍然有效，但是第二个不再依赖于第一个。

编辑：感谢freedom-m，我有一个可行的解决方案，但它以列表中的最后一个选项被“选定”结束，因此如何使其成为第一个选项？

var $select1 = $('#select1'),
  $select2 = $('#select2'),
  $options = $select2.find('option');

$select1.on('change', function() {
  var size = $(this).find("option:selected").data("size");
  $select2.html($options.filter('[data-size="' + size + '"]'));
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
  <select class="form-control" name="select1" id="select1">
    <option data-size="1">Fruit</option>
    <option data-size="2">Animal</option>
    <option data-size="3">Bird</option>
    <option data-size="4">Car</option>
  </select>
</div>
<div class="col-xs-6">
  <select class="form-control" name="select2" id="select2">
    <option data-size="1">Banana</option>
    <option data-size="1">Apple</option>
    <option data-size="1">Orange</option>
    <option data-size="2">Wolf</option>
    <option data-size="2">Fox</option>
    <option data-size="2">Bear</option>
    <option data-size="3">Eagle</option>
    <option data-size="3">Hawk</option>
    <option data-size="4">BWM
      <option>
  </select>
</div>

Answer 1

使用$(this).data("size")是正确的，但是需要将其应用于所选的<option>而不是<select>

var size = $(this).find("option:selected").data("size");
$select2.html($options.filter('[data-size="' + size + '"]'));

目前尚不清楚为什么在.html(.filter()中选择了最后一个，但是您可以使用.first()（或:first）选择第一个，或使用{{1 }}

更新的代码段：

.val("")

var $select1 = $('#select1'),
    $select2 = $('#select2'),
    $options = $select2.find('option');

$select1.on('change', function() {
  var size = $(this).find("option:selected").data("size");
  $select2.html($options.filter('[data-size="' + size + '"]'));
  $select2.val($select2.find("option:first").val());
  //$select2.val("");
}).trigger('change');

Answer 2

这可能有效，尽管可能有更好的方法：

var $select1 = $( '#select1'),
$select2 = $( '#select2' ),
$options = $select2.children();

$select1.on( 'change', function() {
$select2.html($options.filter( function(index) {
    return ($select1.find(":selected").data("size") == $(this).data("size"));
}));

}).trigger( "change" );

基本上过滤选项集，其中该数据属性等于第一个选择列表中的所选选项数据属性值。有点想知道为什么您需要这样做而不是使用值。

freedom -m发布的内容。对于那个很抱歉。没看到。

Answer 3

您可以通过data-XXX来访问.data("XXX")属性

console.log($("#one").val());
console.log($("#two").data("size"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<option id="one" value="1">Fruit</option>
<option id="two" data-size="2">Fruit</option>

如何在jQuery过滤器中使用选择选项的数据属性？

3 个答案: