Question

我正在预订这家酒店form，或者至少试图让它成功。但在我完成这一目标的道路上，我遇到了一些问题。我有两个不同的drop-down menu's，我想从同一个array中检索信息，因为两者都包含相同的信息。

如果我所说的任何内容似乎不清楚或广泛，请在投诉前询问，我会尽力解释。

编辑：我正在谈论的两个菜单是值为“selectRom”的两个菜单。

<html>
    <head>
        <meta charset="UTF-8">
        <style>

        </style>

        <title>

        </title>

    </head>

    <body>


    <div>
    <select id="selectNumber">
    <option>Velg ett sted</option>
    </select>
    <input type="date">
    <input type="number">
    <br><select id="selectRom">
    <option>Antall singel rom</option>
    </select>

    <br>    <select id="selectRom">
    <option>Antall singel rom</option>
    </select>
    <br>Skipass:<input type="checkbox" id="skiPass">
    <br>Skiutstyr:<input type="checkbox" id="skiUtstyr">




    </div>

    <script>
    var select = document.getElementById("selectNumber");
    var options = ["Konsberg", "Trysil", "Beitostølen"];
    for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    }
    var select = document.getElementById("selectRom");
    var options = ["1", "2", "3"];
    for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    }   

    </script>
    </body>
</html>

一个问题，与主要问题无关，如果有人知道如何将整个事情变成一个计算器，根据输入的信息进行计算，如果有人愿意解释或尝试教导，我会很高兴我。的的jsfiddle： https://jsfiddle.net/wa1fyLa7/

Answer 1

https://jsfiddle.net/wa1fyLa7/5/

注意：请多次使用相同的ID。

<body>


    <div>
    <select id="selectNumber">
    <option>Velg ett sted</option>
    </select>
    <input type="date">
    <input type="number">
    <br><select id="selectRom">
    <option>Antall singel rom</option>
    </select>

    <br>    <select id="selectRom2">
    <option>Antall singel rom</option>
    </select>
    <br>Skipass:<input type="checkbox" id="skiPass">
    <br>Skiutstyr:<input type="checkbox" id="skiUtstyr">




    </div>

    <script>
    var select = document.getElementById("selectNumber");
    var options = ["Konsberg", "Trysil", "Beitostølen"];
    for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    }
    var select = document.getElementById("selectRom");  
  var select2 = document.getElementById("selectRom2");
    var options = ["1", "2", "3"];
    for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
     var el2 = document.createElement("option");
    el2.textContent = opt;
    el2.value = opt;
    select.appendChild(el);
    select2.appendChild(el2);
    }   

    </script>
    </body>

Answer 2

https://jsfiddle.net/wa1fyLa7/1/

我将elem改为class而不是id。

    var select = document.getElementsByClassName("selectRom");
  console.log(select);
  var options = ["1", "2", "3"];
  for(var j = 0; j < select.length; j++) {
  var elem = select[j];
    for(var i = 0; i < options.length; i++) {
      var opt = options[i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      elem.appendChild(el);
    }   

  }

Answer 3

也许你想这样做

＆＃13;

<body>


  <div>
    <select id="selectNumber">
      <option>Velg ett sted</option>
    </select>
    <input type="date">
    <input type="number">
    <br>
    <select id="selectRom">
      <option>Antall singel rom</option>
    </select>

    <br>
    <select id="selectRom2">
      <option>Antall singel rom</option>
    </select>
    <br>Skipass:
    <input type="checkbox" id="skiPass">
    <br>Skiutstyr:
    <input type="checkbox" id="skiUtstyr">




  </div>

  <script>
    var select = document.getElementById("selectNumber");
    var options = ["Konsberg", "Trysil", "Beitostølen"];
    for (var i = 0; i < options.length; i++) {
      var opt = options[i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      select.appendChild(el);
    }
    add("selectRom");
    add("selectRom2");

    function add(idN) {
        var select = document.getElementById(idN);
        var options = ["1", "2", "3"];
        for (var i = 0; i < options.length; i++) {
          var opt = options[i];
          var el = document.createElement("option");
          el.textContent = opt;
          el.value = opt;
          select.appendChild(el);
        }
      }
      //var select = document.getElementById("selectRom");
      //var options = ["1", "2", "3"];
      //for(var i = 0; i < options.length; i++) {
      //var opt = options[i];
      //var el = document.createElement("option");
      //el.textContent = opt;
      //el.value = opt;
      //select.appendChild(el);
      //}
  </script>
</body>

＆＃13;

在不同的下拉菜单中使用数组中的相同值

3 个答案: