Populate dropdown with JSON and jQuery

Question

I am trying to populate a dropdown menu from another dropdown.

This happened with the onChange event of first dropdown but I have problem when I select one of the options from dropdown 1 then it do getJson and it returns correct values in JSON, but the problem is that dropdown is populated every time even if I select the same value.

Here is the code:

$.getJSON("ajax.php", 
    { m: "modules/json/json-get-category",
      r: $('#id_project').has('option').val()
    }, 
    function(data){
        var html = '';
        var len = data.length;
        alert(len);
        //$('#id_category').val('').trigger('chosen:updated');
        for (var i = 0; i< len; i++) {
            html += '<option value="' + data[i].id + '">' + data[i].catName + '</option>';
        }
        $('#id_category').append(html);
});

Returned JSON:

[
    {"id":"27","catName":"Hardware support"},
    {"id":"29","catName":"test"}
]

The dropdown1 has correct value on first onChange event, but after it starts to duplicate values:

Example: I have 2 Hardware support, 2 test ... and it just goes to add on it.

Jerodev · Accepted Answer · 2014-07-29 07:00:18Z

1

You need to remove all options before adding the new options. Before your for loop, add the following:

$("#id_category").find("option").remove();

This should remove the current items and make room for the new ones.

answered Jul 29, 2014 at 7:00

Jerodev

33.3k11 gold badges96 silver badges113 bronze badges

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

Comments

user3559349 · Accepted Answer · 2014-07-29 06:59:35Z

1

At the beginning of your function, remove the existing options

$('#id_category').empty();

answered Jul 29, 2014 at 6:59

user3559349

Collectives™ on Stack Overflow

Populate dropdown with JSON and jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related