How to get the id value of a multiple SELECTION using javaScript?

Question

I want to get the ID values of multiple selection list. The multiple selection list is generated dynamically. How to get that values? If i can able to get the values means, can I convert it to JSON object or, it ll be obtained as JSON object!!!!

Here is my code to generate it dynamically.

function displayMultipleList() {
    EmployeeManagement.getResponseList(function (respList) {
        var respOptionsSelect = document.getElementById('respOptions');
        var searchOptions = null;
        for (var i = 0; i < respList.length; i++) {
            var resp = respList[i];
            selectOptions = document.createElement('option');
            selectOptions.value = resp.respID;
            selectOptions.innerHTML = resp.respName;
            respOptionsSelect.appendChild(selectOptions);
        }


    });
}

Thanks.

Answer 1

Here's how you iterate over a list of options inside a select element and get the ids:

http://jsfiddle.net/bXUhv/

In short:

$('option', $('#optionlist')).each(function() {
    alert($(this).attr('id'));
});​

With regard to converting any data into a JSON object, please look into this jQuery library.

Answer 2

You can use the serializeArray() function:

$("#respOptions").serializeArray()

It will return to you the selected objects in a JavaScript array which can be easily stringified to a JSON string.

If your <select> element looks like this (don't forget the name attribute, as serializeArray needs it!):

<select name="respOptions" id="respOptions" multiple="true">
 <option value="1">one</option>
 <option value="2">two</option>
 <option value="3">three</option>
</select>

If items 2 and 3 were selected, you would get this back from the function:

[{ name: "respOptions", value: "2"}, {name: "respOptions", value: "3"}]

EDIT - I forgot to add the name attribute to the <select> element. Sorry for the confusion.

Answer 3

Taking the ambiguity of the question as a challenge, here are two options.

You're asking "how to get the values" and "convert it to JSON object." Taking that literally, and ignoring the mention of id, you can simply do this:

var x = JSON.stringify( $('#respOptions').val() );

...which will give you a simple (JSON) array of the selected values:

["somevalue","anothervalue"]

But if by "get the ID values" you mean "get the IDs and values of selected options", then you can do something like this:

var y = $('#respOptions option:selected').map( function(i,el){
    var result = {};
    result[ el.id ] = $(el).val();
    return result;
}).get();
y = JSON.stringify(y);

...which will give you an array like this:

[{"id1":"somevalue"},{"id5":"anothervalue"}]

I threw together a fiddle that makes assumptions about your HTML, and mocks in the respList from which the options are dynamically added. It solves the problem both ways.

If your browser doesn't support JSON.stringify, you can use Crockford's oft-recommended json2.js library.