如何将html中select选项的输入与javascript一起使用

How to use an input from a select option in html with javascript?

本文关键字：输入 javascript 一起 选项 html select      更新时间：2023-09-26

我想为一个唯一的ID分配一个下拉选项，这样当它被选中时，javascript就会获取该ID并将其转换为一个变量，我可以使用它来显示成本。

这就是我目前所拥有的：

<form>
        <select>
        <option name ="Bristol "value="40.0" id="BN1">Bristol - Newcastle</option>
        </select>
        <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
        </form>
function BookingFare() { 

            var price = 0;
            //var ofAdults = document.getElementById('adults').value;
            //var ofChildren = document.getElementById('children').value;
            var BN1 = document.getElementById('BN1').value;
            if (BN1) {
             var price = price + 40; 
            }
            document.getElementById('priceBox').innerHTML = price;
            }

我无法让它显示价格，即使我只是试图让它在选择BN1时打印出"你好"，它也不起作用。有人能告诉我我缺了什么吗？

function BookingFare() { 
            var price = 0;
            //var ofAdults = getElementById('adults').value;
            //var ofChildren = getElementById('children').value;
            var BN1 = document.getElementById('BN1').value;
            if (BN1) {
             var price = price + 40; 
            }
            document.getElementById('priceBox').innerHTML = price;
            }
<form>
        <select id="BN1">
        <option name ="Bristol "value="40.0" >Bristol - Newcastle</option>
        </select>
        <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
        </form>
<label id='priceBox'></label>

相关文章：