I have one Dropdownlist list contains like this:

<select id="sample" >
  <option value="1">FRIEND</option>
  <option value="2">GOOGLE</option>
  <option value="3">AGENT</option>
</select>

I need convert Dropdownlist to Json fromat like this:

 var json={"FRIEND:"1","GOOGLE":"2","AGENT":"3"}

Please anyone help me.

I have one Dropdownlist list contains like this:

<select id="sample" >
  <option value="1">FRIEND</option>
  <option value="2">GOOGLE</option>
  <option value="3">AGENT</option>
</select>

I need convert Dropdownlist to Json fromat like this:

 var json={"FRIEND:"1","GOOGLE":"2","AGENT":"3"}

Please anyone help me.

• javascript
• jquery
• json

Share Improve this question Follow edited Dec 24, 2012 at 7:57 Derek 朕會功夫 94.5k4545 gold badges198198 silver badges253253 bronze badges asked Dec 24, 2012 at 7:40 ramesh nuneramesh nune 5333 silver badges66 bronze badges 1

• 1 BTW, this isn't JSON, it's just an ordinary Javascript object. – Barmar Commented Dec 24, 2012 at 7:56

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

var json = {};
$("#sample option").each(function() {
    json[$(this).text()] = $(this).val();
});

<select id="sample" >
    <option value="1">FRIEND</option>
    <option value="2">GOOGLE</option>
    <option value="3">AGENT</option>
</select>
<script type="text/javascript">
    var obj = {};
    $("#sample option").each(function (i, op) {
        obj[$(op).text()] = $(op).val();
    });
    var s = JSON.stringify(obj);
    alert(s);
</script>

it's easy!

var json = {};
var select = document.getElementById('sample');
var options = select.options,option;
for (var i=0,len=options.length;i<len;i++) {
    option = options[i];
    json[option.innerHTML] = option.value;
}

now the json object is that what you want!

do this

var x=document.getElementById("sample"),
    y=x.options,
    obj={} 
for(var i=0,len = y.length;i<len;i=i+1){
    obj[y[i].text] = i+1;
}

now you can simply call

obj["FRIEND"]
obj["GOOGLE"]

You can use map function of jquery.

var items = $("#sample > option").map(function() {
var arr = {};
arr[$(this).text()] = $(this).val();
return arr;
}).get();

alert(JSON.stringify(items));

You can create static object without jquery

​var data = new Object();
data.FRIEND= 1;
data.GOOGLE= 2;
data.AGENT= 3;

Update

var data = new Object();

$('#sample option').each(function(e){
    var value = $(this).val();
    var key = $(this).text();
    console.log('"' + key + ':' + value);
    data[key] = value;
});

var json = JSON.stringify(data);
console.log('---- using JSON.stringify ----');
console.log(json);

var obj = $.parseJSON(json);
console.log('---- using jQuery parseJSON ----');
console.log(obj);

With jQuery:

var options = $('#sample option'),
form = {};
options.each(function (​key, val) {
   form[$(val).text()] = $(val).val();
});

or with pure JS:

var options = document.querySelectorAll('#sample option'),
form = {},
i = 0;
for (; i < options.length; i++) {
   form[options[i].innerHTML] = options[i].getAttribute('value');
}