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

-1

我正在制作眼镜的保险表单，第一个选择框是保险计划。第二个选择框是镜头的样式，第三个框是镜头上想要的选项。是否有办法从3份保险计划中选择，然后选择镜片样式，然后选择一个选项并将其金额放入保险之前的输入框和保险之后的另一个输入框中。该值将基于最后选择的选项，但基于Plan和镜头样式的不同金额？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计划”，在下拉，然后选择在另一个下拉单视功能，选项将花费：

<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，进展，相同选项的成本会改变，因为前两个选择。希望这有助于澄清。我想我正在寻找改变基于前两个选择框的镜头选项的价值。 :-)

来源

2016-11-10 Mike LaFrance

你能澄清要求吗？这有点混乱。你在谈论连接的下拉菜单吗？ –

是的，这是可能的。请开始，我们会在您遇到困难时提供帮助。首先给出选项的一个值属性 – mplungjan

您可以创建一个对象，显示每个选项的价格：用户从菜单中选择

再经过

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从数据库中获取它。

来源

2016-11-10 17:59:02 Barmar

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

回答

相关问题