下拉菜单的HTML和Javascript（jquery）行为

Question

In the following fiddle, I used both html and javascript to manipulate a drop-down list. Both with the same ID, however the javascript code is not working, is there something wrong with it?

https://jsfiddle.net/a2owoszc/4/

This is the js code:

var options = ["1", "2", "3", "4", "5"];
var $el = $("#example");
$el.empty();
$el.each(options, function(i, p) {
    $el.append($('<option></option>').val(p).html(p));
});

In addition, how would you explain the behavior of the dropdown list? Will the values change to the values specified in JS or stay the same as the values specified in HTML code, and why?

Answer 1

Check this,

 $(document).ready(function() { var options = ["1", "2", "3", "4", "5"]; var $el = $("#example"); $el.empty(); $.each(options, function(i, p) { $el.append($('<option></option>').val(p).html(p)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="example"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> 

You had mistake in this line $el.each(options, function(i, p) { which is not syntax of $.each function

Answer 2

Here is the working jsfiddle:

https://jsfiddle.net/78dkd9mf/

And here the code:

var options = ["1", "2", "3", "4", "5"];
var $el = $("#example");
$el.empty();
$.each(options, function(i, p) {
    $el.append($('<option></option>').val(p).html(p));
});

Also I think you forgot to link to the jquery plugin in the JSFiddle.

Answer 3

Another simple way to do it.

$(function(){ 
  var options = ["1", "2", "3", "4", "5"];
  var $el = $("#example");
  $el.empty();

  options.forEach((option) => {
    $el.append($('<option></option>').val(option).html(option));
  });

})