Question

我对下面的脚本有一个问题，如果＆＃34;产品颜色＆＃34;多次更改（选中），水果下拉列表中的第一个预选/过滤项实际上是前一个数组列表中的最后一项，它应该是该列表中的第一个。

因此，如果我选择了Green，它将过滤到：＆＃34; All＆＃34;，＆＃34; Fruit 1＆＃34;，＆＃34; Fruit 3＆＃34;，＆＃34;水果5＆＃34;
但是当我切换到黄色时，Fruit下拉中的预选值将是上一个列表中的最后一个，所以“Fruit 5”

如何强制它始终是第一个值？

示例如下：

＆＃13;

$(function() {
  var $product = $('[name="filter-product"]');
  var $fruits = $('[name="filter-fruits"]');

  var $fruitsList = $fruits.find('option').clone();

  var fruit = {
    "Green": ["All", "Fruit 1", "Fruit 3", "Fruit 5"],
    "Yellow": ["All", "Fruit 1", "Fruit 3", "Fruit 4", "Fruit 5"]
  }

  $product.change(function() {
    var $selectedProduct = $(this).find('option:selected').text();
    $fruits.html($fruitsList.filter(function() {
      return $.inArray($(this).text(), fruit[$selectedProduct]) >= 0;
    }));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Color</h4>
<select name="filter-product">
  <option value="All">All</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
</select>
<h4>Fruit</h4>
<select name="filter-fruits">
  <option value="All">All</option>
  <option value="fruit1">Fruit 1</option>
  <option value="fruit2">Fruit 2</option>
  <option value="fruit3">Fruit 3</option>
  <option value="fruit4">Fruit 4</option>
  <option value="fruit5">Fruit 5</option>
</select>

＆＃13;

Answer 1

要执行此操作，您可以在更新selectedIndex元素后手动将选择的0设置为option，如下所示：

$(function() {
  var $product = $('[name="filter-product"]');
  var $fruits = $('[name="filter-fruits"]');

  var $fruitsList = $fruits.find('option').clone();

  var fruit = {
    "Green": ["All", "Fruit 1", "Fruit 3", "Fruit 5"],
    "Yellow": ["All", "Fruit 1", "Fruit 3", "Fruit 4", "Fruit 5"]
  }

  $product.change(function() {
    var $selectedProduct = $(this).find('option:selected').text();
    $fruits.html($fruitsList.filter(function() {
      return $.inArray($(this).text(), fruit[$selectedProduct]) >= 0;
    }));
    $fruits[0].selectedIndex = 0; // select the first option
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Color</h4>
<select name="filter-product">
  <option value="All">All</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
</select>
<h4>Fruit</h4>
<select name="filter-fruits">
  <option value="All">All</option>
  <option value="fruit1">Fruit 1</option>
  <option value="fruit2">Fruit 2</option>
  <option value="fruit3">Fruit 3</option>
  <option value="fruit4">Fruit 4</option>
  <option value="fruit5">Fruit 5</option>
</select>

Answer 2

＆＃13;

$(function() {
  var $product = $('[name="filter-product"]');
  var $fruits = $('[name="filter-fruits"]');

  var $fruitsList = $fruits.find('option').clone();

  var fruit = {
    "Green": ["All", "Fruit 1", "Fruit 3", "Fruit 5"],
    "Yellow": ["All", "Fruit 1", "Fruit 3", "Fruit 4", "Fruit 5"]
  }

  $product.change(function() {
    var $selectedProduct = $(this).find('option:selected').text();
    $fruits.html($fruitsList.filter(function() {
      return $.inArray($(this).text(), fruit[$selectedProduct]) >= 0;
    }));
    $fruits[0].selectedIndex = 0;
    
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Color</h4>
<select name="filter-product">
  <option value="All">All</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
</select>
<h4>Fruit</h4>
<select name="filter-fruits">
  <option value="All">All</option>
  <option value="fruit1">Fruit 1</option>
  <option value="fruit2">Fruit 2</option>
  <option value="fruit3">Fruit 3</option>
  <option value="fruit4">Fruit 4</option>
  <option value="fruit5">Fruit 5</option>
</select>

＆＃13;

Answer 3

$(function() {
  var $product = $('[name="filter-product"]');
  var $fruits = $('[name="filter-fruits"]');

  

  var fruit = {
    "Green": ["All", "Fruit 1", "Fruit 3", "Fruit 5"],
    "Yellow": ["All", "Fruit 1", "Fruit 3", "Fruit 4", "Fruit 5"]
  }

  $product.change(function() {
//moving this clone function inside onclick can help;
  var $fruitsList = $fruits.find('option').clone();
    var $selectedProduct = $(this).find('option:selected').text();
    $fruits.html($fruitsList.filter(function() {
      return $.inArray($(this).text(), fruit[$selectedProduct]) >= 0;
    }));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Color</h4>
<select name="filter-product">
  <option value="All">All</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
</select>
<h4>Fruit</h4>
<select name="filter-fruits">
  <option value="All">All</option>
  <option value="fruit1">Fruit 1</option>
  <option value="fruit2">Fruit 2</option>
  <option value="fruit3">Fruit 3</option>
  <option value="fruit4">Fruit 4</option>
  <option value="fruit5">Fruit 5</option>
</select>

过滤选择框时选择第一个值

3 个答案: