jquery how to fill select option in my form

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

Possible duplicate of [Adding options to select with javascript](https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript) — James, Jun 06 '17 at 19:35

score 0 · Answer 1 · answered Jun 06 '17 at 19:37

0

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

answered Jun 06 '17 at 19:37

Prateek

368
3
16

score 0 · Answer 2 · answered Jun 06 '17 at 19:39

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/

score 0 · Answer 3 · answered Jun 06 '17 at 19:40

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">

score 0 · Answer 4 · answered Jun 06 '17 at 19:42

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.

Pankaj Shukla · Accepted Answer · 2017-06-06T21:33:52.643

0

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>

edited Jun 06 '17 at 21:33

answered Jun 06 '17 at 19:55

Pankaj Shukla

2,657
2
11
18

your example works, but when i try to insert my var data - it doesn't works. I edit my post, there is a image, where you can see how my data array looks like. Can you edit your code, please? – Станислав Строянецкий Jun 06 '17 at 20:03
@СтаниславСтроянецкий What do you want in options out of `id`, `name_rom`, `name_rus`? Do you want just `id`? – Pankaj Shukla Jun 06 '17 at 20:06
Dear Shukla, i want to fill in select value = id and it will be named = name_rus – Станислав Строянецкий Jun 06 '17 at 20:09
Like this: – Станислав Строянецкий Jun 06 '17 at 20:11
See my edit. I have added value as id=1,2 and text, as name_rus=abc,xyz respectively for two options. Hopefully this is what you are looking for! – Pankaj Shukla Jun 06 '17 at 20:16
I am sorry, but when a try to add my data var - it doesn't work. I don't understand, why – Станислав Строянецкий Jun 06 '17 at 20:31
@СтаниславСтроянецкий What do you mean by `it doesn't work`? What errors? – Pankaj Shukla Jun 06 '17 at 20:34
Can i meet you in skype or facebook? Sorry, if i disturb you. – Станислав Строянецкий Jun 06 '17 at 20:38
@СтаниславСтроянецкий Still I am not clear. do you see any errors in console.log window (assuming chrome)? – Pankaj Shukla Jun 06 '17 at 20:40
Nope. No errors. Just new options don't appear. This is image of my code: https://i.gyazo.com/45b7cbfdc15372d3690164b2d91e7a2a.png And this is output. Only an object in console and that;s all: https://i.gyazo.com/36e690a47066e2d9670a32ee4a78b797.png – Станислав Строянецкий Jun 06 '17 at 20:44
@СтаниславСтроянецкий Try to use this `options += '';` – Pankaj Shukla Jun 06 '17 at 20:50
@СтаниславСтроянецкий What is the version of chrome? Also, you can change the last line to `$('#activity_2').append(options);` This would save you from calling getElementById. – Pankaj Shukla Jun 06 '17 at 21:01
added, didn't helped. Chrome is the last( – Станислав Строянецкий Jun 06 '17 at 21:03
@СтаниславСтроянецкий OK, just try putting my code without ajax call for experiments? – Pankaj Shukla Jun 06 '17 at 21:08
with your var data evertything works fine! But only i use my data json - nothing happens. :( – Станислав Строянецкий Jun 06 '17 at 21:10
@СтаниславСтроянецкий Also console.log(options); What do you get? – Pankaj Shukla Jun 06 '17 at 21:10
@СтаниславСтроянецкий With your data? – Pankaj Shukla Jun 06 '17 at 21:13
chrome - https://i.gyazo.com/24b493920d5f1412a263fb3c7f926ed2.png console log displays nothing. code - https://i.gyazo.com/859047d890d1a619e9532cb4968897e3.png – Станислав Строянецкий Jun 06 '17 at 21:16
@СтаниславСтроянецкий Last try! Do the same but use options as `options += '';` – Pankaj Shukla Jun 06 '17 at 21:20
result - https://i.gyazo.com/5c15ad93c2dd900254ef7d2d4539b011.png code - https://i.gyazo.com/cfd20df794716cf4c28b70a27a51d5d6.png – Станислав Строянецкий Jun 06 '17 at 21:23
@СтаниславСтроянецкий Did you debug? Do you go inside for loop? – Pankaj Shukla Jun 06 '17 at 21:25
i like your solution the most, I will set your solution as answer. i will go and test it. if you have some ideas, message me please. – Станислав Строянецкий Jun 06 '17 at 21:28

jquery how to fill select option in my form

5 Answers5