выпадающий список с параметрами Javascript HTML обязательный элемент

ProgramBox

выпадающий список с параметрами Javascript HTML обязательный элемент

Post author:admin
Запись опубликована:30 мая, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

У меня проблема с одним из выпадающих списков, в основном с выпадающим списком passenger. К элементам cars и passenger прикреплены действия Javascript, cars вычисляет общую стоимость, которая работает отлично, и имеет требуемый тег, который снова работает отлично, если ничего не выбрано. Пассажир меняет то, что выбрано из cars, опять же, это работает отлично, но тег require не работает, я так часто бился головой о стену, честно говоря, я думаю, что у меня проломлен череп! :-(Где я ошибся? Кто-нибудь может помочь, пожалуйста?

      let passengers = {
        "1": [{
                value: 0,
          desc: ""
        }, {
          value: 1,
          desc: "1 Passenger"
        }, {
          value: 2,
          desc: "2 Passengers"
        }, {
          value: 3,
          desc: "3 Passengers"
          }, {
          value: 4,
          desc: "4 Passengers"
        }, {
          value: 5,
          desc: "5 Passengers"
        }],
        "2": [{
        
          desc: ""
        }, {            
          value: 1,
          desc: "1 Passenger"
        }, {
          value: 2,
          desc: "2 Passengers"
        }, {
          value: 3,
          desc: "3 Passengers"
          }, {
          value: 4,
          desc: "4 Passengers"
        }, {
          value: 5,
          desc: "5 Passengers"
        }, {
          value: 6,
          desc: "6 Passengers"
          }, {
          value: 7,
          desc: "7 Passengers"
        }, {
          value: 8,
          desc: "8 Passengers"
        }, {
          value: 9,
          desc: "9 Passengers"
          }, {
          value: 10,
          desc: "10 Passengers"       
        }],
        "3": [{
        
          desc: ""
        }, {            
          value: 1,
          desc: "1 Passenger"
        }, {
          value: 2,
          desc: "2 Passengers"
        }, {
          value: 3,
          desc: "3 Passengers"
          }, {
          value: 4,
          desc: "4 Passengers"
        }, {
          value: 5,
          desc: "5 Passengers"
        }, {
          value: 6,
          desc: "6 Passengers"
          }, {
          value: 7,
          desc: "7 Passengers"
        }, {
          value: 8,
          desc: "8 Passengers"
        }, {
          value: 9,
          desc: "9 Passengers"
          }, {
          value: 10,
          desc: "10 Passengers"
        }, {
          value: 11,
          desc: "11 Passengers"
        }, {
          value: 12,
          desc: "12 Passengers"
          }, {
          value: 13,
          desc: "13 Passengers"
        }, {
          value: 14,
          desc: "14 Passengers"
        }, {
          value: 15,
          desc: "15 Passengers"       
        }],
      }

      document.getElementsByName('cars')[0].addEventListener('change', function(e) {
        document.getElementsByName('passenger')[0].innerHTML = passengers[this.value].reduce((acc, elem) => `${acc}<option value="${elem.value}">${elem.desc}</option>`, "");
      });

    function totalise() {
     var qtd = document.getElementById('cars').value;
     var price = document.getElementById('cost').value;
     var result = document.getElementById('total');
     result.value = price * qtd;
     }

  <input type="hidden" name="cost" id="cost" value="50">
<form action="" method="POST">
<div>
<select required="required" name="cars" id="cars" onChange="totalise()">
<option></option>
<option value="1">1 Car</option>
<option value="2">2 Cars</option>
<option value="3">3 Cars</option>
</select>
                          
</div>
<div>
<select required="required" name="passenger" id="passenger">
<option></option>
</select>
</div>
<input type="text" id="total" size="4" readonly>
<div>
<input type="submit" value="submit">
</div>
</form>

Развернуть фрагмент

Ответ №1:

Просто измените свой массив следующим образом, как сказал Симону, обязательные проверки пустых строк.

Требуемый атрибут является логическим атрибутом.

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

Примечание: Требуемый атрибут работает со следующими типами ввода: текст, поиск, URL, телефон, электронная почта, пароль, средства выбора даты, номер, флажок, радио и файл. W3schools

 let passengers = {
  "1": [{
          value:"",
          desc: ""
        }, {
          value: 1,
          desc: "1 Passenger"
        }, {
          value: 2,
          desc: "2 Passengers"
        }, {
          value: 3,
          desc: "3 Passengers"
          }, {
          value: 4,
          desc: "4 Passengers"
        }, {
          value: 5,
          desc: "5 Passengers"
        }],
        "2": [{
          value:"",
          desc: ""
        }, {            
          value: 1,
          desc: "1 Passenger"
        }, {
          value: 2,
          desc: "2 Passengers"
        }, {
          value: 3,
          desc: "3 Passengers"
          }, {
          value: 4,
          desc: "4 Passengers"
        }, {
          value: 5,
          desc: "5 Passengers"
        }, {
          value: 6,
          desc: "6 Passengers"
          }, {
          value: 7,
          desc: "7 Passengers"
        }, {
          value: 8,
          desc: "8 Passengers"
        }, {
          value: 9,
          desc: "9 Passengers"
          }, {
          value: 10,
          desc: "10 Passengers"       
        }],
        "3": [{
          value:"",
          desc: ""
        }, {            
          value: 1,
          desc: "1 Passenger"
        }, {
          value: 2,
          desc: "2 Passengers"
        }, {
          value: 3,
          desc: "3 Passengers"
          }, {
          value: 4,
          desc: "4 Passengers"
        }, {
          value: 5,
          desc: "5 Passengers"
        }, {
          value: 6,
          desc: "6 Passengers"
          }, {
          value: 7,
          desc: "7 Passengers"
        }, {
          value: 8,
          desc: "8 Passengers"
        }, {
          value: 9,
          desc: "9 Passengers"
          }, {
          value: 10,
          desc: "10 Passengers"
        }, {
          value: 11,
          desc: "11 Passengers"
        }, {
          value: 12,
          desc: "12 Passengers"
          }, {
          value: 13,
          desc: "13 Passengers"
        }, {
          value: 14,
          desc: "14 Passengers"
        }, {
          value: 15,
          desc: "15 Passengers"       
        }],
      }

      document.getElementsByName('cars')[0].addEventListener('change', function(e) {
        document.getElementsByName('passenger')[0].innerHTML = passengers[this.value].reduce((acc, elem) => `${acc}<option value="${elem.value}">${elem.desc}</option>`, "");
      });

    function totalise() {
     var qtd = document.getElementById('cars').value;
     var price = document.getElementById('cost').value;
     var result = document.getElementById('total');
     result.value = price * qtd;
     }

 <input type="hidden" name="cost" id="cost" value="50">
<form action="" method="POST">
<div>
<select required="required" name="cars" id="cars" onChange="totalise()">
<option></option>
<option value="1">1 Car</option>
<option value="2">2 Cars</option>
<option value="3">3 Cars</option>
</select>
                          
</div>
<div>
<select required="required" name="passenger" id="passenger">
<option></option>
</select>
</div>
<input type="text" id="total" size="4" readonly>
<div>
<input type="submit" value="submit">
</div>
</form>

Развернуть фрагмент