使用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）的第二个参数移动到映射中。

当前回答

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

2017-10-30 13:27:38

其他回答

var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

这样，您只需“触摸DOM”一次。

我不确定最新的一行是否可以转换为$（'#mySelect'）.html（output.join（''）），因为我不知道jQuery的内部结构（可能它在html（）方法中进行了一些解析）

2009-11-05 19:42:53

我做了类似的事情，通过Ajax加载一个下拉项。上面的响应也是可以接受的，但是为了更好的性能，尽可能少地修改DOM总是很好的。

因此，与其在循环中添加每个项目，不如在循环中收集项目，并在完成后将其追加。

$(data).each(function(){
    ... Collect items
})

附加它，

$('#select_id').append(items);

甚至更好

$('#select_id').html(items);

2008-10-05 04:52:12

<!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

对老@joshberry的回答进行了改进：

看起来plain.append也能像预期的那样工作，

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

或更短，

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

2013-04-17 11:29:16

获取对象键以获取对象值。使用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对象中的选择添加选项的最佳方法是什么？

推荐文章

最新文章

标签