How to incorporate a HTML select into a innerHTML?

Question

I have a php page that reads data from a Mysql table and displays it in a HTML table. I then use AJAX to allow the user to update the data, one row at a time. For text fields, that works fine.

However, for some columns I would like the user to select from a drop down list rather than be able to enter free text.

The initial data table has the following line to display the current event field:

echo "<td><div id=$event_id>$row[event]</div></td>";

I then modify this line using Javascript to make a field the user can edit:

document.getElementById(event_id).innerHTML = "<input type=text id='" +data_event + "' value='"+ event + "'>";

Any idea how I can add the HTML select?

Thanks

Answer 1

assuming you'd have a db-column "eventtype" (int) which you want the user to select from you could do:

in PHP:

$selectData = Array("first Choice","second Choice", "third Choice");
echo "<td><div id=$event_id>".$selectData[$row[eventtype]]."</div></td>";

in a script-tag write the $selectData into a javascript object:

var selectData = <?php echo json_encode($selectData) ?>;

in your modifying function:

// you need to pass in the event_type as you did with data_event
var options="";
for (i=0; i<selectData.length; i++) {
   selected = (data_event_type == i) ? selected : "";
   options += "<option value=\""+i+"\" "+selected+">"+selectData[i]+"</option>";
}
document.getElementById(event_id).innerHTML = "<select id='" +data_event + "'>"+options+"</select>;