Javascript to create drop down list in dynamic table

Posted on 2009-04-03
Last Modified: 2012-06-27
I have a table that I am creating dynamically through some javascript code, as seen below.   Notice lines 14-18 are commented out.  I want this cell to be a drop down list with data I can retrieve from another PHP file.  The php file below does create a single drop down box.  I can't figure out how to put these together.

I can hardcode the line
qtyType.innerHTML = "<select><option>Item1</option></select>";
in the javascript file to get a dropdown, but that's not really the way I want to go.

javascript functions


function appendRow()


 var tbody = document.getElementById("t1").getElementsByTagName("tbody")[0];

 var row = document.createElement("TR");

 var remove = document.createElement("TD");

 remove.innerHTML = "<img src='/testSite/ajax/images/trash.jpg' style='cursor:pointer;cursor:hand' alt='Remove Row' onclick='deleteCurrentRow(this)'/>";

 var salesOrder = document.createElement("TD");

 salesOrder.innerHTML = document.getElementById('textField').value;

 var qty = document.createElement("TD");

 qty.innerHTML = "2";

 var qtyType = document.createElement("TD");


 //var qtyTypeDescArray = new Array();

 //qtyTypeDescArray = getQtyTypeDesc();

// qtyType.innerHTML = "<ref=phpFunctions.php>";


 var wall = document.createElement("TD");

 wall.innerHTML = "4";

 var product = document.createElement("TD");

 product.innerHTML = "5";

 var lgth = document.createElement("TD");

 lgth.innerHTML = "6";

 var hand = document.createElement("TD");

 hand.innerHTML = "7";

 var csg = document.createElement("TD");

 csg.innerHTML = "8";

 var ship = document.createElement("TD");

 ship.innerHTML = "9";

 var customerName = document.createElement("TD");

 customerName.innerHTML = "10";

 var hot = document.createElement("TD");

 hot.innerHTML = "<input type='checkbox' style='cursor:pointer;cursor:pointer' value='hot'/>";















php function






    include 'config.php';

    include 'opendb.php';

    $result = mysql_query('SELECT `qtyTypeDesc` FROM `listqtytypes`',$conn);

    echo '<select>';


    $optionString = '';



      $optionString .= '<option>' . $row['qtyTypeDesc'] . '</option>';


    echo $optionString;

    echo '</select>';


    include 'closeDB.php';





Open in new window

Question by:someITguys
  • 2
  • 2
LVL 10

Expert Comment

Comment Utility
You can go about this in different ways.

1. Include your second PHP-file in the first and put the output in a global javascript variable that you can use in your appendRow() function. This is the easiest to implement and the fastest too.

2. Load the file with XMLHttpRequest when the document is loaded and cache that in a variable. The result is exactly the same as option one, only with a little more overhead.

3. Load the file with XMLHttpRequest when you add the row. You can either wait for the result to arrive before adding the row (will make it slow), or add the row with an empty <select> and fill it in when it comes back. The first one is slow (row will not be visible until the server responds).

The first and second option behave exactly the same. This is the best option to choose unless the select options change on the fly. Of these options the second one is more work without much benefit (except keeping the files separate).

The third option is for if the data is really 'live' and needs to be up-to-date to the second. Which way do you want to go?

Author Comment

Comment Utility
Thanks for the info.  I think I will be able to go with the first option for this case, but I may need the third option for my next step (filling the rest of the table).

On the php that makes the select drop down should it be a function that returns a string? ie- <option>something</option><option>somethingElse</option>

I am a little new at web development, so can you provide an example?  Right now I have three files.  My index.php which calls the javascript file (on key down) to create a table, and phpFunctions.php which has the sql query to create the drop down.

-note - I will try this Monday when I get to work.
LVL 10

Accepted Solution

cyberstalker earned 500 total points
Comment Utility
If you are going to include the the phpFunctions.php in index.php and you want to use innerHTML, you can just make it echo it's output into a javascript variable.

Then require() phpFunctions.php in the head section of index.php.


    include 'config.php';

    include 'opendb.php';

    $optionString = "<select>";

    $result = mysql_query('SELECT `qtyTypeDesc` FROM `listqtytypes`',$conn);



      $optionString .= "<option>{$row->qtyTypeDesc}</option>";


    $optionString .= "</select>";

    echo "var QtyTypeDesc = '{$optionString}'";


    include 'closeDB.php';



Open in new window


Author Comment

Comment Utility
After a better look...I need to go with option 3, but I have no idea how to do this.  I have never done any AJAX code.

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now