时间戳

首页 > 解决方案 > 带有 Javascript 选项的下拉列表 HTML 必需元素

javascript - 带有 Javascript 选项的下拉列表 HTML 必需元素

问题描述

我对其中一个下拉菜单有疑问，主要是乘客下拉菜单。汽车和乘客元素都附加了 Javascript 操作，汽车计算总成本，它完美运行并具有所需的标签，如果没有选择任何内容，它再次完美运行。乘客更改从汽车中选择的内容，再次完美运行，但是需要标签不起作用，我一直在用头撞墙，坦率地说，我想我的头骨骨折了！:-(我哪里出错了？有人可以帮忙吗？

     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>

标签： javascripthtml

解决方案

只需像这样更改您的数组，就像 SimonU 说的那样需要检查空字符串。

必需的属性是一个布尔属性。

如果存在，它指定在提交表单之前必须填写输入字段。

注意： required 属性适用于以下输入类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、数字、复选框、单选和文件。 W3学校

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>

推荐阅读