Question

我有2个选择选项菜单：

<select name="cylinder" class="cylinder" id="cylinder">
 <option value="0" selected="selected">Please select from the options below...</option>
 <option value="500">£500 for 230 Litres (2000 x 400 / 2-3 people)</option>
 <option value="550">£550 for 260 Litres (1800 x 450 / 2-3 people)</option>
 <option value="600">£600 for 290 Litres (2000 x 450 / 3-4 people)</option>
 <option value="650">£650 for 320 Litres (1800 x 500 / 4-5 people)</option>
 <option value="700">£700 for 350 Litres (2000 x 500 / 5-6 people)</option>
 <option value="800">£800 for 512 Litres (2000 x 600 / 6-7 people)</option>
</select>

<select name="heatex" class="cylinder" id="heatex">
 <option value="0" selected="selected">Please select from the options below...</option>
 <option value="250">£250 for an Internal Mains Coil 110 Kw</option>
 <option value="350">£350 for an Internal Mains Coil 110 Kw with Twin Mixer Upgrade</option>
 <option value="400">£400 for an Internal Mains Coil 165 Kw</option>                              
 <option value="500">£500 for an Internal Mains Coil 165 Kw with Twin Mixer Upgrade</option>
 <option value="700">£700 for an External Plate Exchanger 165</option>
</select>

以及用于存储所选选项值的以下JavaScript代码

function next_section()
 {
   var a = document.getElementById("cylinder").selectedIndex;  
   var num = new Number(document.getElementsByTagName("option")[a].value);

   var b = document.getElementById("heatex").selectedIndex;
   var num2 = new Number(document.getElementsByTagName("option")[b].value);

   document.getElementById('total').innerHTML = (num+num2);
 }

我有一个按钮来调用该功能：

<img src="buildernext.jpg" onClick="next_section(1)"/>

该功能的目的是更新以下文字：

Basic Thermal Store: &nbsp;&pound;<span id="total">0.00</span>

我的错误/问题：

基本上，如果您选择“heatex”选择菜单下的第4个选项，则该功能将从“柱面”选择菜单中获取第4个选项值。我只能假设我的问题是试图获得2个选定的索引？我不确定，任何和所有帮助都赞赏。

Answer 1

使用以下内容更改您的JS代码：

function next_section()
{
   var a = document.getElementById("cylinder");  
   var num = Number(a.options[a.selectedIndex].value);

   var b = document.getElementById("heatex");
   var num2 = Number(b.options[b.selectedIndex].value);

   document.getElementById('total').innerHTML = (num+num2);
 }

Answer 2

您可以使用：

function next_section()
{
   var selectA = document.getElementById("cylinder");
   var num = selectA.options[selectA.selectedIndex].value;

   var selectB = document.getElementById("heatex");
   var num2 = selectB.options[selectB.selectedIndex].value;

   document.getElementById('total').innerHTML = (num+num2);
 }

Answer 3

我认为这对你来说是一个很好的解决方案:(使用jquery）

$('#selectForm').submit(function(e){
   e.preventDefault();
    next_section();
});
function next_section()
 {
     var num1 = parseInt($("#cylinder").val());  
     var num2 = parseInt($("#heatex").val());

   $('#total').html(num1+num2);
 }

多个选定索引查询的问题（选择选项菜单）

3 个答案: