如何使用javascript中的php制作动态下拉菜单？

Question

I was trying to make a dropdown menu with dynamic contents from php elements in javascript, but when I click on the button add item, nothing happened. the elements from php is stored in $item[]

<script>
function addInput()
{
    var table = document.getElementById("item");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "<select name="i1[]">
            <?php 
                echo "<option selected disabled>Choose Item Code</option>";
                $i=0;
                while(!empty($item[$i]))
                {
                    echo "<option value=".$item[$i].">".$item[$i]."</option>";
                    $i++;
                }
             ?></select>";
    cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
    cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}
</script>

Answer 1

You need to quote the code you are echoing with PHP since it will be considered and executed as javascript code not as string quotes that shall be assigned to the innerHTML property.

Besides, you shall concatenate the options.

It is better to build your select with PHP variables where you add all the options to it and then assign it one shot to the cell innerHTML

function addInput()
{
    var table = document.getElementById("item");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    <?php 
        $i=0;
        $select = "<select name='i1[]'";
        $options = "<option selected disabled>Choose Item Code</option>";
        while(!empty($item[$i]))
        {
           $options .= "<option value=".$item[$i].">".$item[$i]."</option>";
            $i++;
        }

        $select .= $options . "</select>";
     ?>

    cell1.innerHTML = "<?php echo $select;?>";
    cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
    cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}

Answer 2

Your should add "+" symbol after every line that you generated by PHP

function addInput()
{
        var table = document.getElementById("item");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = ""+
            "<select name='i1[]'>"+
                <?php 
                        echo "'<option selected disabled>Choose Item Code</option>'+";
                        $i=0;
                        while(!empty($item[$i]))
                        {
                                echo "'<option value=".$item[$i].">".$item[$i]."</option>'+";
                                $i++;
                        }
                 ?>
        "</select>";
        cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
        cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}

Answer 3

Use it like this:

<script>
function addInput()
{
    var table = document.getElementById("item");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = '<select name="i1[]">
            <?php 
                echo "<option selected disabled>Choose Item Code</option>";
                $i=0;
                while(!empty($item[$i]))
                {
                    echo "<option value=".$item[$i].">".$item[$i]."</option>";
                    $i++;
                }
             ?></select>';
    cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
    cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}
</script>