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

在下面的fiddle中，我使用了html和javascript来操作下拉列表。两者都具有相同的ID，但是javascript代码不起作用，是否有问题

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

var选项=[“1”、“2”、“3”、“4”、“5”]；
var$el=$（“示例”）；
$el.empty（）；
每个$el（选项、功能（i、p）{
$el.append（$（''）.val（p）.html（p））；
});

此外，您如何解释下拉列表的行为？这些值是否会更改为JS中指定的值，或者与HTML代码中指定的值保持一致，以及原因？

检查此项

$（文档）.ready（函数（）{
var期权=[“1”、“2”、“3”、“4”、“5”]；
var$el=$（“示例”）；
$el.empty（）；
$。每个（选项、功能（i、p）{
$el.append（$（''）.val（p）.html（p））；
});
});

A.
B
C
D
以下是正在工作的JSFIDLE：


下面是代码：

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

var选项=[“1”、“2”、“3”、“4”、“5”]；
var$el=$（“示例”）；
$el.empty（）；
$。每个（选项、功能（i、p）{
$el.append（$（''）.val（p）.html（p））；
});

另外，我认为您忘了在JSFIDLE中链接jquery插件。
另一种简单的方法

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

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

})

$（函数（）{
var期权=[“1”、“2”、“3”、“4”、“5”]；
var$el=$（“示例”）；
$el.empty（）；
options.forEach（（选项）=>{
$el.append（$（''）.val（option.html（option））；
});
})