javascript drop down menus returning a value

Question

been using the site for a while - first time posting.

I have a problem i am trying to solve. in Javascript (not jQuery or AJAX) i am trying to have 2 drop down menus, and a third field returning an integer based on the two drop-downs. So i have Dropdown menu 1, when the user selects a value from that menu the second dropdown will display the relevant items - this i have running fine using an example i found here: Populate one dropdown based on selection in another

However i now need to be able to pull a value out based on the selection in the second drop-down menu. For instance the user selects an "Audi" in the first menu, then "A4" in the second menu and is then shown the price of that specific item.

im at a total loss with this one, been trying to use the index off the second dropdown menu - once a user has selected the third item the index should return "4" i could then set-up another array to switch that "4" to the value i want - but that seems clunky.

In my initial tests for my menu's i was using this array:

    stone_category = 0;
 stone_category["Granite & Marble"]=1;
 stone_category["Sensa Granite"]=2;
 stone_category["Silestone Quartz - Polished Finish"]=3;
 stone_category["Silestone Quartz - Leather & Volcano Finish"]=4;
 stone_category["Eco Recycled Surfaces - Polished Finish"]=5;
 stone_category["Caesarstone Quartz - Polished Finish"]=6;
 stone_category["Unistone Quartz - Polished & Leather Finish"]=7;
 stone_category["Samsung Radianz Quartz - Polished Finish"]=8;
 stone_category["Okite Quartz - Polished Finish"]=9;
 stone_category["Compac Quartz - Polished and Matt Finish"]=10;

And from that i could pull the numeric value to use in a calculation. however the way i then had to set up my drop-down menus that style of array doesnt work for the second menu leaving me at the loss i am at now.

i hope i have explained clearly enough.

Answer 1

You could add an extra attribute to those elements, something like category-id="x" , where x is the value you want to pull from each. Then you can grab that value with a selector:

value = document.querySelector("#submenu .checked").getAttribute("category-id");

Change #submenu and .checked with whatever classes or selectors you add to the submenu and selected items.

Answer 2

Thanks for the responses, and i apologise for missing the HTML out - brain frazzle yesterday (been too long since i last coded!).

I the end i managed to fix the problem by creating a switch statement in the final calculation. This retrieves the value from the second menu that the user has selected and switches it for the desired value like this:

var a = document.getElementById("ddl2");
var strUser = a.options[a.selectedIndex].value;

//switch the name of the stone for a price

if (thicknessDesired == "20") {
switch (strUser) {
case 'Galaxy Grey':
case 'Rosa Porrino':
case 'Rosa Sardo':
        var price = '99.75';
    break;

the switch statement is now growing rapidly hence only posting a snippet. this is probably not the most elegant solution but i have found it works just fine, so for now i can plough on to the next issues lol.

Thanks again guys