hbbz040 hbbz040 - 6 months ago 20
Javascript Question

Set Select in Javascript

I`ve been trying to work out how to fix this problem in vain.

Here the below code works fine. However, in jsfiddle nothing happens as well as in HTML file.

I don`t know what is wrong with it. Could anyone please show me how I can fix it?



function selectItems() {
var myDiv = document.getElementById("car-select");
var array = ["McLaren", "Ferrari", "Mercedes"];
var selectList = document.createElement("select");
selectList.setAttribute("id", "Car");
myDiv.appendChild(selectList);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}

var myDiv2 = document.getElementById("tyre-select");
var array2 = ["Bridgestone", "Michelin", "Continental"];
var selectList2 = document.createElement("select");
selectList2.setAttribute("id", "Eng");
myDiv2.appendChild(selectList2);
for (var i = 0; i < array2.length; i++) {
var option2 = document.createElement("option");
option2.setAttribute("value", array2[i]);
option2.text = array2[i];
selectList2.appendChild(option2);
}
}

<body class="car-showing" onload="selectItems()">
<div id="PPMCar">
<form method="post">
<ul>
<li class="engine-item">
<div class="engine-details-name">
<a class="race-team">Race Team</a>
<ul class="car-attributes">
<div id="car-select">
<li>#1:</li>
</div>
<div id="tyre-select">
<li>#2:</li>
</div>
</ul>
</div>
</li>
</ul>
</form>
</div>
</body>




Answer

Your code works just fine for me, and really there's nothing wrong with Michael Gaskill's code, I am just someone who if I see the same code being implemented more than once, I work to find a way to not have to repeat myself.

This way declares a function inside our function. The resulting code accomplishes the same thing, but ends up gaining some description as well as removing a lot of redundant processes.

function selectItems() {
  var fn = function(el,select_id, arr) {
    var selectList = document.createElement("select");
    selectList.setAttribute("id", select_id);

    for (var i = 0; i < arr.length; i++) {
      var option = document.createElement("option");
      option.setAttribute("value", arr[i]);
      option.text = arr[i];
      selectList.appendChild(option);
    }
    el.appendChild(selectList);
  };
  var car_select = document.getElementById("car-select");
  var car_brands = ["McLaren", "Ferrari", "Mercedes"];
  fn(car_select, 'car', car_brands);

  var tyre_select = document.getElementById("tyre-select");
  var tyre_brands = ["Bridgestone", "Michelin", "Continental"];
  fn(tyre_select, 'tyre', tyre_brands);
}
<body class="car-showing" onload="selectItems()">
  <div id="PPMCar">
    <form method="post">
      <ul>
        <li class="engine-item">
          <div class="engine-details-name">
            <a class="race-team">Race Team</a>
            <ul class="car-attributes">
              <div id="car-select">
                <li>#1:</li>
              </div>
              <div id="tyre-select">
                <li>#2:</li>
              </div>
            </ul>
          </div>
        </li>
      </ul>
    </form>
  </div>
</body>

Edit

To speak on my comment on Gaskill's code, you could do this with jQuery, if you are using it:

function selectItems() {

  var create_select = function(parent, select_id, options) {

    var select = $('<select />', {
      id: select_id,
      name: select_id
    });

    options = options.map(function(el, i) {
      return $('<option />', {
        value: el,
        html: el
      });
    });
    select.append(options).appendTo($(parent));

  };

  var car_select = $("#car-select");
  var car_brands = ["McLaren", "Ferrari", "Mercedes"];
  create_select(car_select, 'car', car_brands);


  var tyre_select = document.getElementById("tyre-select");
  var tyre_brands = ["Bridgestone", "Michelin", "Continental"];
  create_select(tyre_select, 'tyre', tyre_brands);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="car-showing" onload="selectItems()">
  <div id="PPMCar">
    <form method="post">
      <ul>
        <li class="engine-item">
          <div class="engine-details-name">
            <a class="race-team">Race Team</a>
            <ul class="car-attributes">
              <div id="car-select">
                <li>#1:</li>
              </div>
              <div id="tyre-select">
                <li>#2:</li>
              </div>
            </ul>
          </div>
        </li>
      </ul>
    </form>
  </div>
</body>