如何在获取JSON响应时使用javascript中的组合框在选定索引处获取关联的字段值

Question

您好，我正在开发一个电话缺口应用程序，并从WCF服务中获取数据，该数据将返回JSON响应。 我需要在组合框中显示DesignName并传递关联的designId…任何想法该怎么做？

这是json响应。

{
    "DesignResult":
    "{\"DesignId\":\"1\",\"DesignName\":\"Bedroom\"}     
     {\"DesignId\":\"2\",\"DesignName\":\"Dining\"}
     {\"DesignId\":\"5\",\"DesignName\":\"Entertainment\"}
     {\"DesignId\":\"4\",\"DesignName\":\"Occasional Tables\"}
     {\"DesignId\":\"6\",\"DesignName\":\"Office\"}
     {\"DesignId\":\"3\",\"DesignName\":\"Upholstery\"}"
}

这是我可以在选定位置获取文本的功能

var combo1 = document.getElementById("designBox");
var val = combo1.options[combo1.selectedIndex].text;

但这会给我DesignName，因为我需要在框中显示DesignName，但我需要获取关联的DesignId。

使用以下代码，我可以动态添加选项

for (var i = 0; i < jsonData.Design.length; i++) 
{
opt = document.createElement("option");  
opt.text= jsonData.Design[i].DesignName;
sel = document.getElementById("designBox");  
sel.add(opt); 
}            

修改了代码，如下所示，但DesignId为“ Null”

var optElement = document.createElement("option");
optElement.setAttribute('value',jsonData.Design[i].DesignId);
optElement.innerHTML = jsonData.Design[i].DesignName;

检索：

var combo1 = document.getElementById("designBox");
var test = combo1.getAttribute('value');
alert("test value is...."+test);

Answer 1

问题出在JSON中。 其语法错误。 我已经为您修复了该问题。

在此处全面了解和学习JSON。

var jsonData = '{
    "DesignResult": [
        {
            "DesignId": "1",
            "DesignName": "Bedroom"
        },
        {
            "DesignId": "2",
            "DesignName": "Dining"
        },
        {
            "DesignId": "5",
            "DesignName": "Entertainment"
        },
        {
            "DesignId": "4",
            "DesignName": "OccasionalTables"
        },
        {
            "DesignId": "6",
            "DesignName": "Office"
        },
        {
            "DesignId": "3",
            "DesignName": "Upholstery"
        }
    ]
}';

这是从服务器返回的字符串。 现在，使用eval()函数将其转换为javascript JSON对象。 喜欢，

jsonData = eval('(' + jsonData + ')');

现在，您可以使用循环和所有方法遍历此JSON对象。 要访问所需的数据，您必须像这样实现它，

尝试这个

var len = jsonData.DesignResult.length;

for(var i=0;i<len;i++){
alert("Name - "+jsonData.DesignResult[i].DesignName+" || ID - "+jsonData.DesignResult.DesignId);
}

要修复您的代码，

var len = jsonData.DesignResult.length;
    for (var i = 0; i < len; i++) 
        {
        opt = document.createElement("option");  
        opt.text= jsonData.DesignResult[i].DesignName;
        opt.value = jsonData.DesignResult[i].DesignId;
        //better way is
        //opt.setAttribute('value',jsonData.DesignResult[i].DesignId);
        sel = document.getElementById("designBox");  
        sel.add(opt); 
        }  

我将建议使用jQuery之类的方法，

假设您要将“ ComboBox”附加到ID =“ myCombo”的Div上（根据需要进行更新）

var selectElement = jQuery("<select />",{id:"mySel"});

for(var i=0;i<len;i++){
var optElement = jQuery("<option />",{value:jsonData.DesignResult[i].DesignId,text:jsonData.DesignResult[i].DesignName);
selectElement.append(optElement);
}

$("#myCombo").append(selectElement);

要访问所选元素的名称和ID，请使用

var Name = $("#mySel").html();
var ID = $("#mySel").attr('value');

---

删除旧代码

---

通过comboBox，您是指HTML中的SELECT标记吗？

我很难理解您到底想做什么？

动态生成下拉菜单？ 或者是其他东西 ？

请让我们进一步了解您要确切执行的操作。 :)