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

我对下面的脚本有一个问题，在某种程度上，如果“产品颜色”更改（选择）不止一次，水果下拉列表中的第一个预选/筛选项实际上是上一个数组列表中的最后一个，它应该是该列表中的第一个

• 因此，如果我选择绿色，它将过滤为：“全部”、“水果1”、“水果3”， “水果5”
• 但当我切换到黄色时，水果下拉列表中的预选值将是上一个列表中的最后一个值，所以“水果5”

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

示例如下：

$（函数（）{
var$product=$（'[name=“filter product”]'）；
var$fruits=$（'[name=“filter fruits”]'）；
var$fruitsList=$fruits.find（'option'）.clone（）；
变量水果={
“绿色”：[“全部”、“水果1”、“水果3”、“水果5”]，
“黄色”：[“全部”、“果实1”、“果实3”、“果实4”、“果实5”]
}
$product.change（函数（）{
var$selectedProduct=$（this）.find（'option:selected'）.text（）；
$fruits.html（$fruitsList.filter（function（））{
返回$.inArray（$（this）.text（），水果[$selectedProduct]）>=0；
}));
});
});

颜色
全部的
黄色的
绿色
果
全部的
水果1
水果2
水果3
水果4
水果5
要执行此操作，您可以在更新
选项
元素后手动将select back的
selectedIndex
设置为
0
，如下所示：


$（函数（）{
var$product=$（'[name=“filter product”]'）；
var$fruits=$（'[name=“filter fruits”]'）；
var$fruitsList=$fruits.find（'option'）.clone（）；
变量水果={
“绿色”：[“全部”、“水果1”、“水果3”、“水果5”]，
“黄色”：[“全部”、“果实1”、“果实3”、“果实4”、“果实5”]
}
$product.change（函数（）{
var$selectedProduct=$（this）.find（'option:selected'）.text（）；
$fruits.html（$fruitsList.filter（function（））{
返回$.inArray（$（this）.text（），水果[$selectedProduct]）>=0；
}));
$fruits[0]。selectedIndex=0；//选择第一个选项
});
});

颜色
全部的
黄色的
绿色
果
全部的
水果1
水果2
水果3
水果4
水果5

$（函数（）{
var$product=$（'[name=“filter product”]'）；
var$fruits=$（'[name=“filter fruits”]'）；
var$fruitsList=$fruits.find（'option'）.clone（）；
变量水果={
“绿色”：[“全部”、“水果1”、“水果3”、“水果5”]，
“黄色”：[“全部”、“果实1”、“果实3”、“果实4”、“果实5”]
}
$product.change（函数（）{
var$selectedProduct=$（this）.find（'option:selected'）.text（）；
$fruits.html（$fruitsList.filter（function（））{
返回$.inArray（$（this）.text（），水果[$selectedProduct]）>=0；
}));
$FREATS[0]。已选择索引=0；
});
});

颜色
全部的
黄色的
绿色
果
全部的
水果1
水果2
水果3
水果4
水果5

$（函数（）{
var$product=$（'[name=“filter product”]'）；
var$fruits=$（'[name=“filter fruits”]'）；
变量水果={
“绿色”：[“全部”、“水果1”、“水果3”、“水果5”]，
“黄色”：[“全部”、“果实1”、“果实3”、“果实4”、“果实5”]
}
$product.change（函数（）{
//将此克隆函数移到onclick中会有所帮助；
var$fruitsList=$fruits.find（'option'）.clone（）；
var$selectedProduct=$（this）.find（'option:selected'）.text（）；
$fruits.html（$fruitsList.filter（function（））{
返回$.inArray（$（this）.text（），水果[$selectedProduct]）>=0；
}));
});
});

颜色
全部的
黄色的
绿色
果
全部的
水果1
水果2
水果3
水果4
水果5
没问题。如果答案有帮助，请不要忘记接受答案在更改事件中移动clone（）函数可以帮助它每次重置。