[英]How to incorporate a HTML select into a innerHTML?
I have a php page that reads data from a Mysql table and displays it in a HTML table. 我有一个php页面,可从Mysql表读取数据并将其显示在HTML表中。 I then use AJAX to allow the user to update the data, one row at a time.
然后,我使用AJAX允许用户一次更新一行数据。 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: 然后,我使用Javascript修改此行,以使用户可以编辑一个字段:
document.getElementById(event_id).innerHTML = "<input type=text id='" +data_event + "' value='"+ event + "'>";
Any idea how I can add the HTML select? 知道如何添加HTML select吗?
Thanks 谢谢
assuming you'd have a db-column "eventtype" (int) which you want the user to select from you could do: 假设您有一个数据库列“ eventtype”(int),您希望用户从中选择它,您可以这样做:
in PHP: 在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: 在脚本标签中,将
$selectData
写入javascript对象:
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>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.