JavaScript, если проблема с операцией

Question

Мой javascript предположим, что нужно добавить значение к переменной цены, а затем вернуть цену, моя проблема в том, что я использую опцию select, и когда у меня есть более одного, цена будет использовать только идентификатор last if statement, вот мой 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; 
     } 

Так в основном программа вернет цену BN1, даже если я выбираю Бристоль - Лондон. Любые предложения оценены.

Answer 1

Результат имеет смысл. Проверка внутри вашего ifs является правдой в обоих случаях (вероятно, потому, что оба BL1, BN1 существуют).

Что вам нужно сделать в коде, это получить выбранный индекс, а затем использовать его.

Дайте идентификатор для вашего списка:

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

И затем использовать его в коде, чтобы получить выбранное значение:

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

Взгляните на подобный вопрос here. Вы также можете найти относительный учебник here.

Answer 2

1st: Вы определяете переменную цена несколько раз. 2nd: Ваш код проверяет «значение» и причину, он всегда имеет значение. Я предполагаю, что вы действительно хотите проверить, выбрана ли опция или нет, а затем используйте ее значение.

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>