JavaScriptif语句麻烦

Question

我的 javascript 假设要为价格变量增加价值，然后 return 价格，我的问题是我使用的是 select 选项，当我有超过一个价格将只使用最后一个 if 语句的 id，这是我的 HTML;

<form>
    <select>
    <option name ="Bristol "value="40.0" id ="BN1">Bristol - Newcastle</option>
    <option name ="London "value="35.0" id ="BL1">Bristol - London</option>
    </select>
    <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
    </form>
    <label id='priceBox'></label>

这是我的 Javascript

function BookingFare() {
        var price = 0;
        //var ofAdults = getElementById('adults').value;
        //var ofChildren = getElementById('children').value;
        var BN1 = document.getElementById('BN1').value;
        var BL1 = document.getElementById('BL1').value;

        if (BL1) {
         var price = BL1;
        }
        if (BN1) {
         var price = BN1; 
        }
        document.getElementById('priceBox').innerHTML = price;
        }

所以基本上程序将 return BN1 的价格，即使我选择布里斯托尔 - 伦敦。任何建议表示赞赏。

Answer 1

结果是有道理的。在这两种情况下，ifs 中的检查都是正确的（可能是因为 BL1、BN1 都存在）。

您需要在代码中做的是检索选定的索引，然后使用它。

为您的下拉列表指定一个 ID：

<select id="dropdownList">
....

然后在您的代码中使用它来检索所选值：

var dropdownList = document.getElementById("dropdownList");
var price = dropdownList.options[dropdownList.selectedIndex].value;
//rest of code

看看类似的问题here。也可以找相关教程here.

Answer 2

1st：您多次定义变量 price。第二：您的代码检查 'value' 并且当然，它总是有一个值。我想，你真正想要检查的是，是否选择了一个选项，然后使用它的值。

function BookingFare() {
  var price = 0;
  var BN1 = document.getElementById('BN1');
  var BL1 = document.getElementById('BL1');

  if (BL1.selected) {
    price = BL1.value;
  }
  if (BN1.selected) {
    price = BN1.value;
  }
  document.getElementById('priceBox').innerHTML = price;
}

<form>
  <select>
    <option name="Bristol " value="40.0" id="BN1">Bristol - Newcastle</option>
    <option name="London " value="35.0" id="BL1">Bristol - London</option>
  </select>
  <button type="button" onclick="BookingFare(); return false;">Submit</button>
  <br>
  <label id='priceBox'></label>
</form>

Answer 3

我想这就是您要找的。

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

JavaScriptif语句麻烦

JavaScript if statement trouble

html

javascript

if-statement