Javascript 3个选择框，但基于所有3个选项的一个值

我正在为眼镜制作一份保险单，第一个选择框是保险计划。第二个选择框是镜头的样式，第三个框是您想要的镜头选项。有没有办法从3个保险计划中选择镜头样式，然后选择一个选项，并将金额输入到保险前的输入框和保险后的另一个输入框中。该值将基于上一次选择的选项，但基于平面和镜头样式的不同数量

我在想：

<select>
<option>Plan A</option>
<option>Plan B</option>
<option>Plan C</option>
</select>

<select>
<option>Single Vision</option>
<option>Bifocal</option>
<option>Trifocal</option>
<option>Progressive</option>
</select>

<select id="options1">
<option>Anti-Glare Coating</option>
<option>Transitions</option>
<option>Edge Polish</option>
<option>Sunglass Tint</option>
</select>
<input type="text" id="before1" class="before">
<input type="text" id="after1" class="after">

计划A
方案B
方案C
单一视觉
双焦
三焦点
进步的
防眩光涂料
过渡
磨边
太阳镜色调

那么，如果您在下拉列表中选择“计划A”，然后在另一个下拉列表中选择“单一愿景”，则选项的成本为：

<select id="options1">
<option value="140,85">Anti-Glare Coating</option>
<option value="100,76">Transitions</option>
<option value="16,9">Edge Polish</option>
<option value="36,15">Sunglass Tint</option>
</select>

防眩光涂料
过渡
磨边
太阳镜色调

---

但是如果你选择了B计划，进步者，同样的选择的成本会因为前两个选择而改变。希望这有助于澄清。我想我希望根据前两个选择框更改镜头选项的值。：-）

您可以创建一个显示每个选项价格的对象：

var prices = {
    'Plan A': {
        'Single Vision': {
            'Anti-Glare Coating': {
                before: 100,
                after: 50
            },
            'Transitions': {
                before: 80,
                after: 60
            },
            ...
        },
        ...
    },
    ...
}

然后，在用户从菜单中选择后，获取值并将其用作对象的索引：

var plan = document.getElementById("plan").value;
var type = document.getElementById("type").value;
var option = document.getElementById("options1").value;
document.getElementById("before1").value = prices[plan][type][option].before;
document.getElementById("after1").value = prices[plan][type][option].after;

---

在实际的应用程序中，您不会像那样硬编码对象，您可以使用AJAX从数据库中获取它。

您能澄清一下需求吗？这有点让人困惑。你说的是连接的下拉列表吗？是的，这是可能的。请开始吧，我们会在你陷入困境时提供帮助。首先给选项一个value属性