使用jQuery向JavaScript对象中的选择添加选项的最佳方法是什么？

使用jQuery从JavaScript对象向＜select＞添加选项的最佳方法是什么？

我正在寻找一些不需要插件的东西，但我也会对现有的插件感兴趣。

这是我所做的：

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

干净/简单的解决方案：

这是matdumsa的清理和简化版本：

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

matdumsa的更改：（1）删除了append（）内选项的close标记，（2）将财产/属性作为append）的第二个参数移动到映射中。

当前回答

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

2018-03-29 16:03:33

其他回答

还有一种方法：

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

2013-04-25 21:59:06

这看起来更好，提供了可读性，但比其他方法慢。

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

如果您想要速度，最快（经过测试）的方法是使用数组，而不是字符串串联，并且只使用一个追加调用。

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

2009-12-21 15:50:52

纯JS

在纯JS中，添加下一个选项来选择更容易、更直接

mySelect.innerHTML+= `<option value="${key}">${value}</option>`;

让selectValues＝｛“1”：“test 1”，“2”：“test2”｝；for（输入selectValues）｛mySelect.innerHTML+=`<option value=“$｛key｝”>$｛selectValues[key]｝</option>`；}<select id=“mySelect”><option value=“0”selected=“selected”>测试0</option></选择>

2020-08-25 20:09:18

将HTML选择id设置为以下行。在这里，mySelect用作select元素的id。

   var options = $("#mySelect");

然后获取这个场景中的selectValues对象，并将其设置为每个循环的jquery。它将相应地使用对象的值和文本，并将其附加到选项选择中，如下所示。

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

当选择下拉列表时，这将显示文本作为选项列表，一旦选择文本，将使用所选文本的值。

Eg.

“1”：“测试1”，“2”：“测试2”，

下拉列表，

显示名称：测试1->值为1显示名称：测试2->值为2

2018-04-11 05:35:43

获取对象键以获取对象值。使用map（）添加新选项。

常量选择值={“1”：“测试1”，“2”：“测试2”}const selectTest=document.getElementById（'selectTest'）Object.keys（selectValues）.map（key=>selectTest.add（新选项（selectValues[key]，key）））<select id=“selectTest”></select>

2020-02-27 11:31:59

使用jQuery向JavaScript对象中的选择添加选项的最佳方法是什么？

推荐文章

最新文章

标签