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

Question

Hello i am developing a phone-gap app and fetching the data from WCF service which returns me JSON response. I need to show DesignName in the combo box and pass the associated designId…Any idea how to do that?

This is the json response..

{
    "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\"}"
}

this is the function with which i can get the text at selected position

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

but this will give me DesignName as i need to show DesignName in the box but i need to get the associated DesignId..

With following code i am adding options dynamically

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); 
}            

modified the code as follows but getting "Null"for DesignId

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

to retrieve:

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

Answer 1

Problem is in JSON. Its syntactically incorrect. I've fixed that for you.

Read about and study JSON thoroughly here .

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"
        }
    ]
}';

This is a string returned from server. Now cast it into javascript JSON object using eval() function. like,

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

Now you are able to iterate over this JSON object using loops and all. To access the data you need, you have to implement it like,

Try this

var len = jsonData.DesignResult.length;

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

To fix your code,

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); 
        }  

I will recommend doing it with jQuery like,

Suppose you want to attach that "ComboBox" to a Div with ID = "myCombo" (update it according to your needs)

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);

To access the Name and ID of the selected element, use

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

---

REMOVED OLD CODE

---

by comboBox, do you mean SELECT tag in HTML?

I am finding it hard to understand what it is that you want to do exactly?

Generate the drop down menu dynamically? or something else ?

Please give us more insight on what you want to do exactly. :)