Use same values from array in different drop down menus

Question

I'm making this hotel booking form, or atleast trying to make it work. But on my road to complete that goal, I've encountered a couple of problems. I got two different drop-down menu'sthat I want to retrive info from the same array, as both will contain the same information.

If anything that I've said seems unclear or to broad, please ask before complaining and I will do my best to explain.

EDIT: The two menus I'm talking about are the two with the value "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>

Aditional question, not related to main question, if anyone know how to make this entire thing into a calculator, calculating depending on what info is typed in, I would be greatful if anyone would be kind enough to explain or try to teach me. JSFIDDLE: https://jsfiddle.net/wa1fyLa7/

It's horrible coding practice to use an identical id for multiple elements. — Tom Burris
– Tom Burris, Commented Jun 8, 2016 at 8:58
Instead of complaining over someone whom are new to this, could you provide constructiv feedback. — ImNewToThis
– ImNewToThis, Commented Jun 8, 2016 at 9:05
It's not complaining, it's against standard and possibly causes errors. — Tom Burris
– Tom Burris, Commented Jun 8, 2016 at 9:09

Gayathri Mohan · Accepted Answer · 2016-06-08 09:09:36Z

1

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

Note :please dont use the same id for multiple times.

<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>

answered Jun 8, 2016 at 9:09

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ImNewToThis Over a year ago

Thank you! Just what I needed :)

Gayathri Mohan Over a year ago

happy coding @ImNewToThis

Sharon Haim Pour · Accepted Answer · 2016-06-08 09:06:49Z

0

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

I changed the elem to class and not 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);
    }   

  }

answered Jun 8, 2016 at 9:06

Sharon Haim Pour

6,72112 gold badges46 silver badges64 bronze badges

Comments

McClinton · Accepted Answer · 2016-06-08 09:24:30Z

Perhaps you wanted to do this

<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>

Collectives™ on Stack Overflow

Use same values from array in different drop down menus

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related