Set Select in Javascript

Question

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>

Working fine..jsfiddle.net/oo0eshhj/1 Change the load type... — Rayon
– Rayon, Commented May 20, 2016 at 4:54

Jhecht · Accepted Answer · 2016-05-21 04:54:00Z

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>

I like the cut of your jib. Good take on refactoring the example.

Michael Gaskill · Accepted Answer · 2016-05-20 06:07:54Z

1

Minor changes needed to get it to work:

function selectItems() { 
    var myDiv = document.getElementById("car-select");
    var array = ["McLaren", "Ferrari", "Mercedes"];
    var selectList = document.createElement("select");
    selectList.setAttribute("id", "Car");
    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);
    }
    myDiv.appendChild(selectList);

    var myDiv2 = document.getElementById("tyre-select");
    var array2 = ["Bridgestone", "Michelin", "Continental"];
    var selectList2 = document.createElement("select");
    selectList2.setAttribute("id", "Eng");
    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);
    }
    myDiv2.appendChild(selectList2);
}

selectItems();

Append the select to the div after you append the option elements (prevents a stale DOM fragment). Then make sure to call the selectItems function at the end to run the code.

Since you have the jQuery tag on the question, this same thing can be accomplished with less code and more easily with jQuery:

function selectItems() { 
    var array = ["McLaren", "Ferrari", "Mercedes"];
    var selectList = $("<select />").attr("id", "Car");
    $.each(array, function(index, item) {
        selectList.appendChild($("<option />").attr("value", array[i]).text(item));
    });
    $("#car-select").append(selectList);

    var array2 = ["Bridgestone", "Michelin", "Continental"];
    var selectList2 = $("#select").attr("id", "Eng");
    $.each(array2, function(index, item) {
        selectList2.appendChild($("<option />").attr("value", array2[i]).text(item));
    });
    $("#tyre-select").append(selectList2);
}

selectItems();

edited May 20, 2016 at 6:07

answered May 20, 2016 at 5:37

Michael Gaskill

8,06210 gold badges40 silver badges46 bronze badges

2 Comments

Jhecht Over a year ago

couldn't you just use selectList.map with jQuery?

Michael Gaskill Over a year ago

Yep, you sure could, and that would be an improvement over the loop. Great suggestion. I'll update the answer with that.

Collectives™ on Stack Overflow

Set Select in Javascript

2 Answers 2

Edit

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related