下拉菜單的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));
  });

})