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

时间:2018-05-21 05:39:14

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

我正在使用HashMapjQueryJSON页面传递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

1 个答案:

答案 0 :(得分:0)

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

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,在value循环中被视为jQuery

此外,我不需要解析response函数中返回的值(在我的情况下是success变量),因为它已经被我解析了。 我的例外的原因是我再次解析它。 感谢Stack Overflow上的所有先前答案。

相关问题