我需要一点帮助。我有一个当前脚本，可以根据下拉选择器将 div 在 可见 和 隐藏 之间切换，它按照最初的设计工作，绝对没问题。

我遇到的问题是，我需要修改它才能更改页面上的多个 div。目前，我对 div 使用相同的 ID，但只有页面上的第一个项目会更新。阅读 JS 后，这很有意义，但我不知道如何修改它才能获得所需的结果？

Javascript：

var lastDiv = "";
var lastProd = "";
function showDiv(divName, productID) {
    if (productID == lastProd) {
        $("#"+lastDiv).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
    } 
    else {
        $(".visible-div-"+productID).hide();
        $("#"+divName).fadeIn(".visible-div-"+productID);
    }
    lastProd = productID;
    lastDiv = divName;
} 

选择器：

<select onchange="showDiv('pxo_'+this.value,2);" name="pre_xo_id">
<option value="3">Blue - £120.00</option>
<option value="4">Red - £120.00</option>
<option value="5">Yellow - £120.00</option>

DIV：

<div id="pxo_3" class="visible-div-2" style="display: none;">RED</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">BLUE</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: block;">YELLOW</div>

<div id="pxo_3" class="visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_4" class="hidden-div visible-div-2" style="display: none;">1 In Stock</div>
<div id="pxo_5" class="hidden-div visible-div-2" style="display: none;">0 In Stock</div>