выберите опцию на изменение

Question

у меня есть JSon данные, как это:

[{ 
     "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" 
    } 
] 

как «создать» выберите вариант с JavaScript (опция value = user_id и text = employe_first_name), что нагрузка при наличии документа готов, и заполнить еще одно поле с выбранным значением

Answer 1

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 

Answer 2

Попробуйте это:

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

Здесь DEMO

Answer 3

Вы можете использовать jQuery для этой цели, таким образом.

Заменить selectId с идентификатором выпадающего списка.

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

Answer 4

попробовать что-то вроде этого

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

ССЫЛКА

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