PHP FOREACH LOOP FOR SELECT OPTION IN JQUERY INSIDE PHP

Question

I have a working select box inside a table.

<tr>
    <td>
        <select name="type" class="inputbox input_table2 table2_index_4" id="item_type">
            <?php foreach ($item_type as $type) { ?>
                <option value="<?php echo $type->id ?>"><?php echo $type->name ?></option>
            <?php } ?>
        </select>
    </td>
</tr>

And here is my scenario My table rows are appended with on trigger a button So how can code this loop in jQuery

I am very beginner in JavaScript libraries and here is what i am trying in JQuery

    <?php

$addtablerow = '    
        $(document).on("click",".add_row_button",function(e) {           
            e.preventDefault();
            var add_new_row = "<tr class=\'row\'> \ 
                                    <td><select name=\'type\' id=\'item_type\' class=\'item_type\'> \ 
                                        <?php foreach ($item_type as $type) { ?> \
                                            <option vlaue=\'<?php echo $type->id ?>\'> <?php echo $type->name ?> </option> \ 
                                        <?php } ?> \
                                        </select> \ 
                                    </td> \ 
                                </tr>";
            $("table#item_type tbody").append(add_new_row);
            indexassigner(); 
        });       
        ';
$this->registerJs($addtablerow, View::POS_READY);
?>

Thanks

loop through PHP array and assign it to js object and then use that object inside jquery — Shakir Baba, Oct 17 '20 at 08:35
[Writing in All Caps Is Like Shouting](https://www.lifewire.com/why-not-to-write-in-all-caps-1173242) — Andreas, Oct 17 '20 at 08:36
Please also make sure you understand [the difference between server-side and client-side programming](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming). — IMSoP, Oct 17 '20 at 10:43

score 1 · Answer 1 · answered Oct 17 '20 at 08:38

As your first select-box i.e : type is same for all trs you can use clone() method to get clone of that first select-box which might be already present in your table and then pass same to your dynamically generated html code.

Demo Code :

$(document).on("click", ".add_row_button", function(e) {
  e.preventDefault();
  var slects = $('#item_type  tr:first').find("select[name=type]").clone(); //get options clone them
  var add_new_row = "<tr class='row'><td><select name = 'type' id='item_type' class='item_type'>" + $(slects).html() + "</select></td> </tr>"; //same same inside slect-box
  $("table#item_type tbody").append(add_new_row);
  //indexassigner();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="item_type">
  <tbody>
    <tr>
      <td>
        <select name="type" class="inputbox input_table2 table2_index_4" id="item_type">
        <!--dummy datas-->
          <option value="1">X</option>
          <option value="2">Y</option>
          <option value="3">Z</option>

        </select>
      </td>
    </tr>
  </tbody>
</table>

<button class="add_row_button">Add more </button>

The problem with this solution is that select in each row will have same `name`. That means if you try to submit your form only last row values will be available for server side scripts. You need to use name that will force the values to be stored in array like `type[]` or generate the `name` attribute dynamically. — Michal Hynčica, Oct 17 '20 at 09:24
Hi, Thank you for suggestion. But , op didn't mention about that . Here only question is to show select-box inside jquery code :) — Swati, Oct 17 '20 at 09:27

score 0 · Accepted Answer · answered Oct 24 '20 at 07:14

I appreciate @Swati for introducing me the clone() property and thank you cauz i didn't know before. Here is the simplest way I found that just appending the PHP code as string in to jQuery.

Inside table

    <tr>
    <td>
        <select name="type[]" class="item_type inputbox input_table2 table2_index_4">
            <?php
            $code_as_string = "<select name='type[]' class='item_type inputbox input_table2' >";
            foreach ($item_type as $type) {
            ?>
                <option value="<?php echo $type->id ?>"><?php echo $type->name ?></option>
            <?php
                $code_as_string .= "<option value='" . $type->id . "'>" . $type->name . "</option>";
            }
            $code_as_string .= "</select>";
            ?>
        </select>
    </td>
</tr>

And simply append the variable $code_as_string to jQuery part

    <?php

$addtablerow = '    
        $(document).on("click",".add_row_button",function(e) {           
            e.preventDefault();
            var add_new_row = "<tr class=\'row\'><td>' . $code_as_string . ' </td>  </tr>";                   
            $("table#item_type tbody").append(add_new_row);
            indexassigner(); 
        });       
        ';
$this->registerJs($addtablerow, View::POS_READY);
?>

PHP FOREACH LOOP FOR SELECT OPTION IN JQUERY INSIDE PHP

2 Answers2