как заполнить данные значений объектов javascript в опции html select с использованием jquery / javascript

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

объект javascript с именем countries. Теперь эти данные я хочу заполнить в HTML select

 var countries = {
    India:"delhi",
    US:"Norway",
    UK:"London",
    id: 123752,
    allcountries : function(){return this.India  " "  this.US   " "   this.UK   " " this.id}
};

HTML-код

 <select id="con">
    <option></option>
</select>

Я пытался

 document.getElementById("con").innerHTML = countries.allcountries();

$('#con option').append(countries.India);

но это не работает, может кто-нибудь помочь мне заполнить данные с помощью jquery / javascript в html select.

1. каков ваш ожидаемый результат? потому что, если это ваш объект js, вам нужно создать новый объект и ввести в него название страны и значения, затем вы можете выполнить цикл для заполнения.

2. Спасибо, ребята, все ответы правильные.

3. все проголосованы за лучшие ответы как для jquery, так и для javascript.

Ответ №1:

Попробуйте,

 var countries = {
    India: "delhi",
    US: "Norway",
    UK: "London"
};

$('#con').html($.map(countries, function (val, key) {
    return '<option value="'   key   '">'   val   '</option>';
}).join(''));

ДЕМОНСТРАЦИЯ

Ответ №2:

У меня это сработало.

HTML:-

 <select id="con">
    <option></option>
</select>

Javascript:-

 var countries = {
India:"delhi",
US:"Norway",
UK:"London",
id: 123752
};

$.each(countries, function (key, value) {
    $('#con').append($('<option/>', { 
        value: value,
        text : key 
    }));
});

Это добавит столицы стран в качестве значений параметров.

Ответ №3:

На родном javascript вы можете попробовать приведенный ниже код:

 <script>
var countries = {
    India:"delhi",
    US:"Norway",
    UK:"London"
};
window.onload=function(){
    console.log(countries);

    var select = document.getElementById("con");
    var option;

    for (var key in countries) {
        option = document.createElement("option");
        option.value = key;
        option.textContent = countries[key];
        select.appendChild(option);
    }
};
</script>

<select id="con">
    <option></option>
</select>

Ответ №4:

Мое предложение состоит в том, чтобы иметь пробел <select> , подобный этому:

 <select id="con"></select>

и обновите свою функцию следующим образом:

 var countries = {
    India: "delhi",
    US: "Norway",
    UK: "London",
    id: 123752,
    allcountries: function () {
        return this.India   " "   this.US   " "   this.UK   " "   this.id
    },
    conToPopulate: function () { // make a new func to return an object
        var o = {}; // create an object
        o['India'] = this.India; // push the required keys and values
        o['US'] = this.US;
        o['UK'] = this.UK;
        return o; // now outputs : {India: "delhi", US: "Norway", UK: "London"}
    }
};
$(function () {
    $.each(countries.conToPopulate(), function (key, value) {
        $('#con').append($('<option/>', {
            value: value,
            text: key
        }));
    });
});