多个选定的索引查询(选择选项菜单)出现问题

Issue with multiple selected index queries (select option menu)

本文关键字:菜单 选项 问题 选择 查询 索引      更新时间:2023-09-26

我有 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 批选定的索引?我不确定,任何和所有的帮助都值得赞赏。

使用以下方法更改您的 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);
 }

您可以使用:

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);
 }

我认为这对你来说是一个很好的解决方案:(使用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);
 }