通过 JavaScript 填充 Html 选择 "FontSize"

Question

我想按脚本填写我的选择。我正在纠结填充方法。

当我想填充我的 FontSizeMenu 时，我使用此代码：

function FillFontSizeMenu() { // run this at Start
  FillSelection(GetPossibleFontSizes(), "fontSizeMenu"); // Fill the selection with values
}

function GetPossibleFontSizes(){ // Return all values for the menu
  var sizeMin = 1;
  var sizeMax = 100;
  var possibleSizes = [];
  for(var i = sizeMin; i <= sizeMax; i++)
  {
    possibleSizes.push(i);
  }
  return possibleSizes;
}


function FillSelection(possibleValues, elementId){ // Fill the menu
  for(var i = 0; i < possibleValues.length; i++)
  {
    var optionElement = "<option></option>"; // add one option element per value
    optionElement.html(possibleValues[i]);
    optionElement.val(possibleValues[i]);
    $(elementId).append(optionElement); // add the option element to the selection
  }
}

"FillSelection" 方法出了点问题，它说选项元素不是一个函数。

有人知道错了什么或遗漏了什么吗？

谢谢

Answer 1

将 html 字符串包装在 jQuery()

中

var optionElement = $("<option></option>");

也可以使用jQuery()设置html、value并调用.appendTo()

$("<option></option>", {
  html: possibleValues[i],
  value: possibleValues[i],
  appendTo: $(elementId)
});

Answer 2

您必须先创建一个元素，然后使用 jquery 附加属性。像这样

var ele = document.createElement("<option>");  
 $("body").append(ele);   
 $(ele).html(possibleValues[i]);
 $(ele).val(possibleValues[i]);

Answer 3

这是另一种解决方案您需要创建新的选项对象

 $(elementId).append(new Option("Font size "+i, possibleValues[i]));

并且您应该将 #id 传递给函数：

FillSelection(GetPossibleFontSizes(), "#fontSizeMenu")

function FillFontSizeMenu() { // run this at Start
  FillSelection(GetPossibleFontSizes(), "#fontSizeMenu"); // Fill the selection with values
}

function GetPossibleFontSizes(){ // Return all values for the menu
  var sizeMin = 1;
  var sizeMax = 100;
  var possibleSizes = [];
  for(var i = sizeMin; i <= sizeMax; i++)
  {
    possibleSizes.push(i);
  }
  return possibleSizes;
}

function FillSelection(possibleValues, elementId){ // Fill the menu
  for(var i = 0; i < possibleValues.length; i++)
  {
    $(elementId).append(new Option("Font size "+i, possibleValues[i])); // add the option element to the selection
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="FillFontSizeMenu()">Populate it</button>
<select id="fontSizeMenu">
</select>

通过 JavaScript 填充 Html 选择 "FontSize"

Fill Html Selection "FontSize" by JavaScript

html

javascript

jquery

selection

drop-down-menu