Question

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

$('#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>

我们非常感谢您的帮助。

Answer 1

您需要使用

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

和

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

因此，您无需定位到“值”属性，而是切换到“数据属性名称”。

更新：这是基于您的笔的working example。

Answer 2

您想要的是什么吗？
要使用data-filter代替value吗？

好吧，这里的问题是您必须查找所选的option ...，因为该值不再与select绑定。就是这样。

$('#city').change(function() {

  var cityFilter = $(this).find("option:selected").data("filter");
  
  $('#street option').hide();
  $('#street option[data-filter="' + cityFilter + '"]').show();
  // add this code to select 1'st of streets automaticaly 
  // when city changed
  if ($('#street option[data-filter="' + cityFilter + '"]').length) {
    $('#street option[data-filter="' + cityFilter + '"]').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="" data-filter="0">Select City</option>
  <option value="" data-filter="1">Manchester</option>
  <option value="" data-filter="2">Leicester</option>
  <option value="" data-filter="3">Londra</option>
</select>

<select id="street" name="street">
  <option value="" data-filter="0">Select Street</option>
  <option value="" data-filter="1">Street 1</option>
  <option value="" data-filter="1">Street 2</option>
  <option value="" data-filter="1">Street 3</option>
  <option value="" data-filter="2">Street 4</option>
  <option value="" data-filter="2">Street 5</option>
  <option value="" data-filter="2">Street 6</option>
  <option value="" data-filter="1200">Street 7</option>
  <option value="" data-filter="1200">Street 8</option>
  <option value="" data-filter="1200">Street 9</option>
</select>

我还使用cityFilter变量“减少”了jQuery查找的次数。

随时提问。 ;）

在示例中将“值”替换为“数据过滤器”

2 个答案: