How I can display dropdown menu list based on my JSON response object?

[prohor]

I am trying to display a dropdown list based on JSON response object, How I can set it for the following code?

in html

<select class="form-control" name="productCategories[]" id="productCategories<?php echo $x; ?>" onchange="getProductData(<?php echo $x; ?>)" >
                                  
</select>

in javascript

$.ajax({
                url: 'php_action/fetchDropdownProductData.php',
                type: 'post',
                data: {brandId : brandId},
                dataType: 'json',
                success:function(response) {
                    
            var html = '<option value="">Select Sub Category</option>';
            html += response;
            $("#productCategories"+row).html(html);
                    
                    
                } // /success
            });

[requinix]

The response isn't HTML. You can't just shove it into that html variable.

jQuery, right? Forget building HTML strings manually. That sucks. If you give the $ function some element, such as that <option> you wrote up there, then jQuery will create it as a new element for you. And you can .appendTo the <select>.
Then similarly, you can create blank options without anything, use functions like .val() and .text() to modify them according to how you want each (tip: that means a loop) to look given the response data, and append them to the <select> as well.

Note that since you're appending new elements, you'll probably want to .empty() the dropdown before you start adding things to it.

Give that a shot. If you have problems, post the code you wrote and a description of how it goes wrong.

[prohor]

On 6/26/2019 at 12:27 AM, Barand said:

Thanks a lot.. what I added is

success: function (response) { var html = '<option value="">Select Sub Category</option>'; response.forEach(category => { html += "<option value='" + category.categories_id + "'>"+ category.categories_name +"</option>" $("#productCategories"+row).html(html); }) }

 

 

On 7/20/2020 at 5:20 AM, requinix said:

So the result you're trying to get for those 5 rows of data is one row with cust_id=126 inc_due=0? Does the inc_amount matter?

Do you have a larger example?