PHP/jQuery - Appending select menu to DOM object

Question

I'm having difficulty wrapping my head around this. I realize PHP is server side based and that jQuery is client side. So the problem lies with how to build that PHP on call, so it's ready to go when a jQuery action is called (I think).

I have an application where I click on a calender day and the selection box renders with options.

Here is my jQuery call:

 <script>
    var count = 0;

    $(".addRow").click(function(){
        var selector = $(this).data('num');
        count++;

        $("#tday_"+selector).append('<br/><br/><span>Additional Food choice: </span><select name='+selector+'>');
    });
  </script>

Problem is - how do I get the options for the select box? Is it possible to render a select box which I can retrieve from PHP in that append? Is it even possible to append to a DOM object FROM PHP, if that is the way to go?

This click does infact work and render an empty select box.

Thanks!

You can create the select box with all the options in PHP and append it to the DOM via AJAX. Or you can send an array of options back from PHP to JavaScript and add the options to the selectbox there. There are a few ways to do it. — putvande, Jul 27 '13 at 15:53
The options would be populated by me via PHP at some point. Via mySQL call (I use something similar already to render the initial calender) — user2124871, Jul 27 '13 at 15:59

score 1 · Accepted Answer · edited May 23 '17 at 12:20

AJAX is the answer.

jQuery Ajax POST example with PHP

Also Look at the above example.

You will need to send a request to your .php file using jquery, and your php file should echo your select menu.

In your jQuery,

<script>
    var count = 0;

    $(".addRow").click(function(){
        var selector = $(this).data('num');
        count++;
        $.post(url, { selector:selector }, function(data){
            $("#tday_"+selector).append('<br/><br/><span>
                             Additional Food choice: </span>'+data);
        //data is whatever php file returned.           
        });
    });
  </script>

I mean whatever your options are, you will need to do the following in your .php file,

$selector = $_POST['selector'];  //variables from jquery.
    //Get your options using mysql.
echo "<select name='".$selector."'>
     <option value='".$option1."'>Option1</option>
     <option value='".$option2."'>Option2</option>
     <option value='".$option3."'>Option3</option>
     </select>";

Replace option1,2,3 with the options you get from your mysql call.

This would be returned to jQuery, which you may then append wherever you want.

EXACTLY what I was looking for. Logically, my issue was grabbing the DOM object in the PHP file. Thanks again! — user2124871, Jul 27 '13 at 16:12

PHP/jQuery - Appending select menu to DOM object

1 Answers1

AJAX is the answer.