Jquery appending values to dropdown from select

Question

I am trying to return values within my dependant dropdown within laravel. The api/dropdown returns json, all working fine. However the values returned are not populated in my dropdown, rather they are displaying [object Object] instead.

Am I missing something?

  $(document).ready(function($){

      $('#firstselect').change(function(){

            $.get("{{ url('api/dropdown')}}", { option: $(this).val() }, 
            function(data) {
                     $.each(data, function(key, value) {   
                         $('#secondselect')
                             .append($("<option></option>")
                             .attr("value",key)
                             .text(value)); 
                    });

            });

        });

    });

can you post what data got in data object..I think you need to go 1 level down in JSON — Naresh Pansuriya
– Naresh Pansuriya, Commented Oct 10, 2014 at 8:43

Aneesh Mohan · Accepted Answer · 2014-10-10 08:47:50Z

$.each(data,function(index,value){

//Make sure value is the string you want to attach by putting a debugger here;
//Append code;

  $('#secondselect').append($("<option></option>")
                         .attr("value",key)
                         .text(value));

});

In the code posted by you

  $(document).ready(function($){

      $('#firstselect').change(function(){

            $.get("{{ url('api/dropdown')}}", { option: $(this).val() }, 
            function(data) {
                     $.each(data, function(key, value) {   

                /**********************************************/
                //Evaluate and make sure value is string
                debugger;
                console.log(value);
               /*************************************************/

                   $('#secondselect').append($("<option></option>")
                             .attr("value",key)
                             .text(value)); 
                    });

            });

        });

    });

Pratik Joshi · Accepted Answer · 2014-10-10 08:40:23Z

0

USe $.parseJSON to fetch values ferom object

 function(data) {
 data =  $.parseJSON(data);
 ...

answered Oct 10, 2014 at 8:40

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

Comments

Mayank · Accepted Answer · 2014-10-10 08:43:31Z

0

Try the FIDDLE

html

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

jquery

$(function () {
    var $val = "Random";
         $('select').append('<option value="'+$val+'">'+$val+'</option>');

        });

hope it helps..

answered Oct 10, 2014 at 8:43

Mayank

1,3925 gold badges25 silver badges45 bronze badges

Collectives™ on Stack Overflow

Jquery appending values to dropdown from select

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related