使用通过 JSON 和 jQuery 传递的数据在下拉列表中创建两个值答案

【问题标题】：create two values in drop down list using data passed through JSON and jQuery使用通过 JSON 和 jQuery 传递的数据在下拉列表中创建两个值
【发布时间】：2018-10-30 17:46:26
【问题描述】：

我使用jQuery 和JSON 将HashMap 传递到JSP 页面。返回给jQuery success函数的值如下：

格式化的 JSON 数据

{  
   "tableBird1":[  
      "001",
      "Eurasian Collared-Dove"
   ],
   "tableBird2":[  
      "002",
      "Bald Eagle"
   ],
   "tableBird3":[  
      "003",
      "Cooper's Hawk"
   ]
}

我想根据这些值填充dropdown list，其中下拉列表包含两个值。

这是我正在尝试的代码：

$.ajax({
        type:"GET",
        url: "url?",        
        data: { groupName: $('#groupNamesDD').val() },  // Data being passed through json from other drop down list
        dataType: "json",
        success: function(response){

        $.each(JSON.stringify(response), function(key,value) {     //  I get this exception here - Cannot use 'in' operator to search for '294' in
            var element = document.createElement("option");                 

            for(var i = 0; i < key.length; i++) {
              element.value= JSON.stringify(key);               
              element.data-value = JSON.stringify(key.value);    // here I get run time exception -  invalid left hand assignment 
              element.text=JSON.stringify(key.value);
              document.getElementById("displayColumnsDropDown").add(element);
            }
          });
        }

});

我想要这样的输出：

<select id="displayColumnsDropDown" >
    <option value="">-- Select --</option>
    <option value="tableBird1" data-value="001" >001</option>
    <option value="tableBird1" data-value="Eurasian Collared-Dove" >Eurasian Collared-Dove</option>
    <option value="tableBird2" data-value="002" >002</option>
    <option value="tableBird2" data-value="Bald Eagle" >Bald Eagle</option>
    <option value="tableBird3" data-value="003" >003</option>
    <option value="tableBird3" data-value="Cooper's Hawk" >Cooper's Hawk</option>


</select>

我从这个链接Can an Option in a Select tag carry multiple values?得到了可能的解决方案

除了这种方式，我不知道如何为下拉列表动态创建多个值。还有其他可能的解决方案吗？

编辑 1： 尝试了以下代码：

$('#displayColumnsDropDown').append($('<option>', { value: key }).data-value(key.value).text(key.value));

在成功方法的第二个for 循环中。我仍然遇到同样的异常：

Cannot use 'in' operator to search for '805' in

【问题讨论】：

标签： java jquery json ajax drop-down-menu

【解决方案1】：

我正在回答我自己的问题。它可能会帮助某人

var $select = $('#displayColumnsDropDown');
$.each(response,function(key,value) 
{  
        if(value instanceof Array)
        {
            for(var i=0;i<value.length;i++)                  
            {                            
                 $select.append('<option value=' + key + ' data-value= ' +value[i]+ '>' + value[i] + '</option>');
            }

        }
 });

我通过 JSON 传递的 HashMap 的语法是这样的：

Map<String, List<String>> listOfColumns  =new HashMap<String, List<String>>();

List 被视为Javascript Array，在我的jQuery 循环中被视为value。

我也不需要解析在 success 函数中返回的值（在我的例子中是 response 变量），因为它已经为我解析了。我的异常的原因是我再次解析它。感谢 Stack Overflow 上所有以前的答案。

【讨论】：