Using PHP array and JS to populate values into dropdown

Question

I'm using PHP and JS to get data from SQL table then populate the result into a dropdown list.

My code is working fine but I'm having a problem using the return output as an array for JS.

In my PHP part of the code, I'm formatting the output into JSON encode'

    echo $js_array = json_encode($Unit_tenants);
    // output is ["1","2","3"]

Now I want to use the return value of this output with JS to populate those values into a dropdown list with values 1,2,3

My JS code

<script>

  $(document).ready(function(){
            $('#ddlUnitNo').change(function(){
                //Selected value
                var inputValue = $(this).val();

                //Ajax for calling php function
                $.post('list.php', { dropdownValue: inputValue }, function(data){


                    //do after submission operation in DOM

                    var select = document.getElementById("selectNumber"); 
var options = data; 

// Optional: Clear all existing options first:
select.innerHTML = "";
// Populate list with options:
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    select.innerHTML += "<option value=\"" + opt + "\">" + opt + "</option>";
}
                         });
            });
        });
</script>

The problem is in var options = data because this is being recognized as a string rather than an array with multiple values. any idea how to fix this?

Why should you need Javascript to populate a dropdown with PHP values? — Padmanabhan
– Padmanabhan, Commented Aug 28, 2018 at 17:51

jdubu423 · Accepted Answer · 2018-08-29 16:47:27Z

6

Javascript wont accept the php array as an array. You need to convert it to an array, or in this case a JSON object.

Try the following:

in php:

return json_encode($data);

in javascript:

var options = JSON.parse(data);
// Populate list with options:
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    select.innerHTML += "<option value=\"" + opt + "\">" + opt + "</option>";
 }

edited Aug 29, 2018 at 16:47

answered Aug 28, 2018 at 17:54

jdubu423

4255 silver badges19 bronze badges

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

1 Comment

calexandru Over a year ago

Tbh I disagree on that since I have done that myself.

Padmanabhan · Accepted Answer · 2018-08-28 18:06:01Z

0

Try this, the PHP way

   <?php  $js_array = ["1","2","3"]; ?>

    <select name="someName" onChange="">
    <option value="" selected>Select One</option>

   <?php    for($k=0, $< count($js_array); $k++){ ?>

    <option value="<?php echo($js_array[$k] ?>"><?php echo($js_array[$k] ?></option>

    <?php } ?>

    </select>

answered Aug 28, 2018 at 18:06

Padmanabhan

1583 silver badges14 bronze badges

Collectives™ on Stack Overflow

Using PHP array and JS to populate values into dropdown

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related