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

当前回答

对老@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

其他回答

简单的方法是：

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

2010-03-25 15:04:40

尽管前面的答案都是有效的答案，但最好先将所有这些附加到documentFragmnet，然后将该文档片段作为元素附加到。。。

看看约翰·雷格对此事的看法。。。

大致如下：

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

2012-11-26 16:38:58

还有一种方法：

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

2013-04-25 21:59:06

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

这就是我对二维数组所做的：第一列是项I，添加到<option>的innerHTML。第二列是record_id i，添加到<option>的值：

PHP文件$items=$dal->get_new_items（）；//从数据库获取数据$items_arr=数组（）；$i=0；foreach（$items作为$item）{$first_name=$item->first_name；$last_name=$item->last_name；$date=$item->date；$show=$first_name。" " . $姓氏。", " . $日期$request_id=$request->request_id；$items_arr[0][$i]=$show；$items_arr[1][$i]=$request_id；$i++；}echo json_encode（$items_arr）；JavaScript/Ajax函数ddl_items（）{if（window.XMLHttpRequest）{//Internet Explorer 7+、Firefox、Chrome、Opera和Safari的代码xmlhttp=new XMLHttpRequest（）；}其他{//Internet Explorer 6和Internet Explorer 5的代码xmlhttp=新ActiveXObject（“Microsoft.xmlhttp”）；}xmlhttp.onreadystatechange=函数（）{如果（xmlhttp.readyState==4&&xmlhttp.status==200）{var arr=JSON.parse（xmlhttp.responseText）；var lstbx=document.getElementById（'my_listbox'）；对于（变量i=0；i<arr.length；i++）{var option=新选项（arr[0][i]，arr[1][i]）；lstbx.options.add（选项）；}}};xmlhttp.open（“GET”，“Code/GET_items.php？dummy_time=”+new Date（）.getTime（）+“”，true）；xmlhttp.send（）；}}

2012-08-09 19:08:56

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

推荐文章

最新文章

标签