過濾選擇框時選擇第一個值

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>