javascript 下拉菜单返回一个值

Question

使用该网站已有一段时间了 - 第一次发帖。

我有一个问题想解决。在 Javascript（不是 jQuery 或 AJAX）中，我试图有 2 个下拉菜单，第三个字段 return 是基于两个下拉菜单的整数。所以我有下拉菜单 1，当用户从该菜单中选择一个值时，第二个下拉菜单将显示相关项目 - 我有运行使用我在这里找到的示例很好：Populate one dropdown based on selection in another

但是我现在需要能够根据第二个下拉菜单中的选择提取一个值。例如，用户在第一个菜单中选择 "Audi"，然后在第二个菜单中选择 "A4"，然后显示该特定项目的价格。

我对这个一无所知，一直在尝试使用第二个下拉菜单中的索引 - 一旦用户选择了第三个项目，索引应该 return "4" 然后我可以设置 -建立另一个数组以将“4”切换为我想要的值 - 但这看起来很笨重。

在我对菜单的初始测试中，我使用了这个数组：

    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;

然后我可以从中提取数值以用于计算。然而，我当时必须设置我的下拉菜单的方式是，数组样式不适用于第二个菜单，让我现在不知所措。

希望我已经解释清楚了。

Answer 1

您可以向这些元素添加一个额外的属性，例如 category-id="x"，其中 x 是您希望从每个元素中提取的值。然后您可以使用选择器获取该值：

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

将 #submenu 和 .checked 更改为任何类或您添加到子菜单和所选项目的选择器。

Answer 2

感谢您的回复，我很抱歉错过了 HTML 昨天的脑筋急转弯（自从我上次编码以来已经太久了！）。

最后我设法通过在最终计算中创建一个 switch 语句来解决问题。这将从用户选择的第二个菜单中检索值并将其切换为所需的值，如下所示：

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

//以价格切换石头名称

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

switch 语句现在正在快速增长，因此只发布了一个片段。这可能不是最优雅的解决方案，但我发现它工作得很好，所以现在我可以继续研究下一个问题，哈哈。

再次感谢大家

javascript 下拉菜单返回一个值

javascript drop down menus returning a value

html

javascript

drop-down-menu