时间戳

首页 > 解决方案 > 在示例中将 'value' 替换为 'data-filter'

javascript - 在示例中将 'value' 替换为 'data-filter'

问题描述

伙计们，这是一个依赖选择选项的例子。

$('#city').change(function() {
  $('#street option').hide();
  $('#street option[value="' + $(this).val() + '"]').show();
  // add this code to select 1'st of streets automaticaly 
  // when city changed
  if ($('#street option[value="' + $(this).val() + '"]').length) {
    $('#street option[value="' + $(this).val() + '"]').first().prop('selected', true);
  }
  // in case if there's no corresponding street: 
  // reset select element
  else {
    $('#street').val('');
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>

<select id="street" name="street">
  <option value="0">Select Street</option>
  <option value="1">Street 1</option>
  <option value="1">Street 2</option>
  <option value="1">Street 3</option>
  <option value="2">Street 4</option>
  <option value="2">Street 5</option>
  <option value="2">Street 6</option>
  <option value="1200">Street 7</option>
  <option value="1200">Street 8</option>
  <option value="1200">Street 9</option>
</select>

一切都很好，但需要将基于值的过滤替换为基于数据属性的过滤，如下所示： 

<option value="1">Street 1</option>  =>  <option data-filter="1" value="">Street 1</option>

非常感谢您的帮助。

标签： javascriptjquery

解决方案

您需要使用

$(this).find(":selected").attr('data-filter')

和

$(this).find(":selected").attr('data-filter') + '"]').first().prop('selected', true);

因此，您可以切换到“data-attributeName”，而不是定位“值”属性。

更新：这是一个基于您的笔的工作示例。

推荐阅读