Question

我有一个下拉选项，其中分配了data-value。目前，当用户选择li时，我正在尝试将分配给他们单击的li的data-value分配给他们。

尝试了以下方法：

  var filters = {};
  $('.filters').on( 'change', function( event ) {
    var $select = $( event.target );
    var filterGroup = $select.attr('value-group');

    // filters[ filterGroup ] = event.target.value;
    // var filterValue = concatValues( filters );
    var element = $(this).find('li');
    // var value = element.getAttribute('data-value');


    // $grid.isotope({ filter: filterValue });

    console.log("change " + element);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="filters">
  <div>
    <select value-group="location">
      <option data-value="*">LOCATIONS</option>
      <option data-value=".London">London</option>
    </select>
  </div>
</div>

因此，当我转到伦敦时，我期望看到change: .London，但是看到change [object Object]

Answer 1

使用$(this).find('option:selected')获取所选选项，并使用此获取您的自定义属性，即attr('data-value')。

演示代码：

//on change of select
$('select').on('change', function(event) {
//get slected option
  var $select = $(this).find('option:selected');
  //get custom attribute
  var filterGroup = $select.attr('data-value');
  console.log(filterGroup)
//duno why you need this 
  var element = $(this).find('li');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="filters">
  <div>
    <select value-group="location">
      <option data-value="*">LOCATIONS</option>
      <option data-value=".London">London</option>
    </select>
  </div>
</div>

Answer 2

您可以改用选项的value

  $('.filters').on( 'change', function( event ) {
    console.log("value " + $(event.target).children("option:selected").val());
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="filters">
  <div>
    <select value-group="location">
      <option value="*">LOCATIONS</option>
      <option value=".London">London</option>
    </select>
  </div>
</div>

从子级获取数据属性

2 个答案: