jQuery如何在我的表格中填写选择选项

Question

enter image description here The json (data) looks like this guys! I have a little form. Like this:

<form method="post" action="" id="ajaxform">
<input type="text" size="32" maxlength="36" name="name" placeholder="Вaшe имя" val="">
        <select id="activity_2" name="activity_2">
        <option value="">Exmaple</option>
        </select>
<input type="submit" value="GO GO GO"/>
</form>
<script src="/add-information/aa.js"></script>

In this little code i receive a json with data from my database:

        var data = JSON.parse(response);
        console.log(data);

in data there is id and name of the rubric. How can i load all this array in my option list? I was told to do something like this:

var select = document.getelementById('activity_2'); // id of the select 
select.options[i] = new Option(data.id, data.od); // add data?

help me please, how i can fill select with data from 'data'?

THE SOLUTION BY ADEON IS:

var data = JSON.parse(response); console.log(data);

    var select = document.getElementById('activity_2');

    for (var i = 0; i < data.data.length; i++) {
    select.options[select.length] = new Option(data.data[i].name_rus, data.data[i].id);
        }

Answer 1

You can loop your data and append option html to your select .

var select = document.getelementById('activity_2');
$(select).html('');
for (var i in data) {
    $(select).append('<option value=' + data[i] + '>' + data[i] + '</option>');
}

Answer 2

Assuming data is an array, you could iterate over it and apply it to the DOM like so.

var optionString = '';
var data = ['John', 'Josh'];

data.forEach(function(dataItem, index){
  optionString += '<option value="' + index + '">' + dataItem + '</option>';
});

$('#activity_2').append(optionString);

Here is a working jsfiddle: https://jsfiddle.net/9ke5fzqo/

Answer 3

You should use add method which accepts as parameter a new Option .

The constructor of Option looks like this: new Option(text,value) .

 var array=[{ "text":"text1", "value":"value1" },{ "text":"text2", "value":"value2" }]; var select = document.getElementById('activity_2'); array.forEach(function(item){ select.add(new Option(item.text,item.value)); }); 

 <select id="activity_2" name="activity_2"> 

Answer 4

You can use $.append in jquery to add new option into a select input. Html:

<select id="selinput" name="activity_2"> <option value="">Exmaple</option> </select>

Jquery:

$("#selinput").append('<option value="1">value</option>');

Or you can use jquery.selec2 plugin.

Answer 5

You need to do these:
1) Your call getelementById should be changed to getElementById otherwise you would receive error.
2) You need to create options string first and then append that string to DOM rather than touching DOM every time you add options. Touching DOM as less as possible is a good idea from performance point of view.
3) To simplify the syntax you can use string interpolation syntax like below:

 var select = document.getElementById('activity_2'); //$(select).html(''); var data = [{id:1, name_rom:'a', name_rus:'abc'},{id:2, name_rom:'x', name_rus:'xyz'}]; var options = ""; for (var i = 0; i < data.length; i++) { options += `<option value=${data[i].id}>${data[i].name_rus}</option>`;//<--string //interpolation } $(select).append(options); //OR below, so you don't need to call document.getElementById //$('#activity_2').append(options); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="" id="ajaxform"> <input type="text" size="32" maxlength="36" name="name" placeholder="Вaшe имя" val=""> <select id="activity_2" name="activity_2"> <option value="">Exmaple</option> </select>