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

Question

我遇到了下面的脚本有问题，如果“产品颜色”被多次更改（选择），水果下拉菜单中的第一个预选/过滤项目实际上是最后一个一个来自之前的数组列表，它应该是该列表中的第一个。

• 所以，如果我选择了绿色IT将筛选到：“全部”，“水果1”，“水果3”， “果5”
• 但是当我切换到水果下拉黄，预选值将从以前的列表中的最后一个，所以“果5”

我怎么能强迫它总是第一个值？

实施例是如下：

：

$(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; 
 
    })); 
 
    }); 
 
});

<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 1

$(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; 
 
    
 
    }); 
 
});

<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

要更新option元件，这样后为此，可以手动设置所述选择的selectedIndex回0

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