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

Question

在下面的小提琴中，我同时使用了html和javascript来操纵一个下拉列表。 两者具有相同的ID，但是javascript代码无法正常工作，这有什么问题吗？

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

这是js代码：

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));
});

此外，您如何解释下拉列表的行为？ 值将更改为JS中指定的值还是与HTML代码中指定的值相同，为什么？

Answer 1

检查一下

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

您在此行中出错$el.each(options, function(i, p) {这不是$ .each函数的语法

Answer 2

这是工作的jsfiddle：

https://jsfiddle.net/78dkd9mf/

这里的代码：

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));
});

我也认为您忘记了链接到JSFiddle中的jquery插件。

Answer 3

另一种简单的方法。

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

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

})