Javascript显示/隐藏多个DIV

Question

I'm in need of a bit of help. I have a current script that switches div's between being visible and hidden depending on a dropdown selector, it works as it was originally designed absolutely fine.

The problem i have is that i need to modify it to change more than 1 div on the page. Currently i'm using the same ID for the div's but only the first item on the page is updated. Reading over the JS this makes sense, but i can't figure out how to modify it to get the desired result?

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;
} 

The selector:

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

The DIV's:

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

Answer 1

id 's must be unique, that's why only the first item is being update. You may put those values to class instead to allow multiple selection.

Answer 2

First you can not use one id for morethan one element.They must be unique.Apply same css class to those elements. We can use same class instead to allow multiple selection.

Answer 3

IDs are supposed to be used for only a single element on the page. You want to use css selectors.

Answer 4

Thank you for the help all, I have modified the JS to look for both ID and Class as i am unable to change part of the code due to it being protected by ioncube.

This seems to have the desired result:

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