select option on change

Question

i have json data like this:

[{
        "user_id": "113",
        "employe_first_name": "Asaladauangkitamakan",
        "employe_last_name": "Nasibb"
    }, {
        "user_id": "105",
        "employe_first_name": "Ryan",
        "employe_last_name": "Friday"
    }, {
        "user_id": "87",
        "employe_first_name ":"hendi ",
        "employe_last_name ":"kenther"
    }
]

how to 'create' select option with javascript (option value = user_id, and text = employe_first_name) that load when document ready, and fill another field with selected value

score 1 · Accepted Answer · answered Dec 24 '13 at 07:30

var data = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
var select = document.createElement("select");
for(var i = 0; i < data.length; i++){
    var option = document.createElement("option");
    option.value = data[i].user_id;
    option.innerHTML = data[i].employe_first_name;
    select.appendChild(option);
}
select.addEventListenter("change", function(event) {
    var selected_value = event.target.value;
    document.getElementById("another_field").value = selected_value;
});
someDiv.appendChild(select); // Add the select menu to the DOM

+1 but `document.createTextNode` instead of `option.innerHTML` — Shea, Dec 24 '13 at 07:36

Ringo · Answer 2 · 2013-12-24T07:36:56.520

0

Try this:

var data = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
var select = document.createElement("select");
    for(var i = 0; i < data.length; i++){
        var option = document.createElement("option");
        option.value = data[i].user_id;
        option.innerHTML = data[i].employe_first_name;
        select.appendChild(option);
    }

Here is DEMO

edited Dec 24 '13 at 07:36

answered Dec 24 '13 at 07:22

Ringo

3,795
3
22
37

Are you really allowed to give the HTML of an element to `document.createElement`? – Barmar Dec 24 '13 at 07:25
Sorry! what do you mean? – Ringo Dec 24 '13 at 07:26
I mean it should be `document.createElement("option")`, you can't put `" – Barmar Dec 24 '13 at 07:27
i have select option, and i wanna fill with json data, when select option change, i wanna append the value to another field – Hahm Dec 24 '13 at 07:29
Sorry! I have some confusion with jquery. So I have just updated my answer. Please try it with jsfiddle – Ringo Dec 24 '13 at 07:37

score 0 · Answer 3 · edited May 23 '17 at 12:11

try something like this

    //doing on dom ready
    var tid = setInterval( function () {
        if ( document.readyState !== 'complete' ) return;
        clearInterval( tid );       
        var json_len = json.length;
        var select = document.getElementById('select_id');
        for(var i=0;i<json_len;i++){
            var option = document.createElement('option');
            option.innerHTML = json[i].employe_first_name;
            option.value = json[i].user_id;
            select.appendChild(option);
        }
    }, 100 );

REFERENCE

Is there a way to check document.ready() if jQuery is not available?

Priyank · Answer 4 · 2013-12-24T08:36:18.513

-1

You can use jQuery for the purpose, in this way .

Replace selectId with the id of your dropdown.

 var jsonData = [{
        "user_id": "113",
        "employe_first_name": "Asaladauangkitamakan",
        "employe_last_name": "Nasibb"
    }, {
        "user_id": "105",
        "employe_first_name": "Ryan",
        "employe_last_name": "Friday"
    }, {
        "user_id": "87",
        "employe_first_name": "hendi ",
        "employe_last_name": "kenther"
    }
];
    var ctrlSelect = $("#selectId");
    $(jsonData).each(function() {
        $("<option value='" + this.user_id + "'>" + this.employe_first_name + "</option>").appendTo($(ctrlSelect));
    });

edited Dec 24 '13 at 08:36

answered Dec 24 '13 at 07:28

Priyank

1,353
9
13

Isn't it obvious? Who said anything about jQuery? – Shea Dec 24 '13 at 20:59
@Shea JQuery is not a different language. It is a javascript library.So one can use JQuery for any javascript task.That is why the answer is relevant here. – Priyank Dec 25 '13 at 06:17

select option on change

4 Answers4