Formularz z instrukcją warunkową

Question

Mam formularz w którym są do wyboru dwie opcje : mały bus i duży bus.

Powiedzmy , że mały bus jest tylko do 2000kg

Niżej wpisuje się wagę paczek do przetransportowania.

Chciałabym, żeby po wpisaniu wagi, która będzie większa niż te 2000kg opcja się zmieniła automatycznie z mały bus na duży bus. 

 <select name="bus" id="flight">
    <option value="Airbus">Airbus</option>
    <option value="Boeing">Boeing </option>
  </select>

 

Answer 1

HTML:

<select name="bus" id="flight">
  <option value="Airbus">Airbus</option>
  <option value="Boeing">Boeing</option>
</select>
<input type="number" name="weight" id="weight" value="1000" />

JavaScript:

var weightInput = document.getElementById('weight');
var flightSelect = document.getElementById('flight');
weightInput.addEventListener('keyup', function() {
  if (this.value < 2000) {
    flightSelect.selectedIndex = 0;
  } else {
    flightSelect.selectedIndex = 1;
  }
});

 

Comments

Proponuję "rozbudować" skrypt @qax,  

const weightInput = document.getElementById('weight');
const flightSelect = document.getElementById('flight');

['keyup', 'change'].forEach((event) => {
  weightInput.addEventListener(event, function() {
    if (this.value < 2000) {
      flightSelect.selectedIndex = 0;
      flightSelect.options[0].disabled = false;
    } else {
      flightSelect.selectedIndex = 1;
      flightSelect.options[0].disabled = true;      
    }
  });
});

 

Answer 2

Możesz podpiąć się na event change do inputa, gdzie wpisuje się wagę paczki, tam sprawdzić wagę (odczyt property value) i wybrać odpowiednią opcję dla <select> poprzez selectedIndex.