我在下面的脚本中有问题,如果"产品颜色"更改(选择(以上,则在果实下拉中的第一个预选/过滤项目实际上是上一个数组列表中的最后一个,它应该是该列表上的第一个。
- 因此,如果我选择绿色,它将过滤到:"全","水果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>
要执行此操作,您可以在更新option
元素之后手动将SELECT返回的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>
$(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>
$(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>