How do I automatically populate a select box in html using jquery & ajax

Question

Here is my HTML code (which is i think where the problem is):

<form name="County" method= "post" action="post">
<select id= item.county_name name= item.county_name> 
<option value="item.county_name"> County </option>

</select>
</form>

Here is my javascript:

$.ajax({
url:'http://107.170.75.124/courts/courts.json',
method: 'post'
})
.done (function(data){
   data.forEach(function(item){
    console.log (item.county_name);
     $ ('select'). append ('<option value="' + item.county_name + '">' + 
'</option>');


})
});

When I attempt to run it the drop box shows all 100 areas where they should be a county, but they are blank. So my guess is that there is something wrong with the HTML preventing it from being visible. All of the counties show up in my console

Scott Marcus · Accepted Answer · 2017-04-17 21:45:53Z

3

You are forgetting to supply the actual display value of the <option> elements. Your <option> elements are winding up like this:

<option value='ajax result item here'></option>

With the <option> element being empty.

Change the line to this:

 $ ('select').append('<option value="' + 
     item.county_name + '">' + item.county_name + '</option>');

Or, just this (because when no value is explicitly set on an option, the value becomes the displayed text of the option):

 $ ('select').append('<option>' + item.county_name + '</option>');

edited Apr 17, 2017 at 21:45

answered Apr 17, 2017 at 21:24

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ad_on_is · Accepted Answer · 2017-04-17 23:46:42Z

0

The "value" param just sets the value of the option, but not it's label. The label needs to be between the <option>tags

Your code is incomplete.

$ ('select').append('<option value="' + item.county_name + '">' + '</option>');

results in something like this

<option value="somecountry"></option>

You need to change it like:

$ ('select').append ('<option value="' + item.county_name + '">' + item.county_name + '</option>');

which should output

<option value="somecountry">somecountry</option>

edited Apr 17, 2017 at 23:46

answered Apr 17, 2017 at 22:59

ad_on_is

1,55815 silver badges28 bronze badges

1 Comment

Scott Marcus Over a year ago

You have a syntax error in your suggested code fix. Once you fix that, you will have the same code that I posted an hour and a half earlier.

Collectives™ on Stack Overflow

How do I automatically populate a select box in html using jquery & ajax

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related