[英]Drop down list from database php/html/javascript
I want to create a dropdown list from database with javascript. 我想使用JavaScript从数据库中创建一个下拉列表。 I am trying to make a dynamic form where I can add multiple rows using "add more" button.
我正在尝试制作一个动态表单,可以使用“添加更多”按钮添加多行。 My html form contains an input type text and a drop down list
我的html表单包含一个输入类型的文本和一个下拉列表
in html 在HTML
<form id="add_name" name="add_name">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<select class="form-control" name="nom_ar">
<?php
while ($row2 = $result2->fetch_assoc()){
echo "<option value='".$row2['nom_ar']."'>".$row2['nom_ar']." </option>";
}
?>
</select>
</td>
<td><input type="text" name="name[]" placeholder="insert name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">add more</button></td>
</tr>
</table>
</form>
In the javascript code I added only the input type text and I don't know how to add the dropdown list like the next code shows : 在javascript代码中,我仅添加了输入类型文本,而且我不知道如何添加下拉列表,如以下代码所示:
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><select class="form-control" name="nom_ar"><?php while ($row2 = $result2->fetch_assoc()){echo "<option value='".$row2['nom_ar']."'>".$row2['nom_ar']."</option>";} ?></select></td><td><input type="text" name="name[]" placeholder="Ingredient" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
} }
How can I do it? 我该怎么做? My drop down list in js is always empty.
我在js中的下拉列表始终为空。 I'm struggling as I'm a beginner.
我正在努力,因为我是一个初学者。 where should I put the php code?
我应该在哪里放置PHP代码?
Well, this is your JS code 好吧,这是你的JS代码
<script type="text/javascript">
$('#add').click(function() {
$("#dynamic_field").append("<tr></tr>");
$.post("server.php", {
object_field: "Any data",
}, function(server_data) {
$("#dynamic_field tr:last-child").html(parse_server_data(server_data));
});
});
function parse_server_data(data) {
data = JSON.parse(data);
var output_string = "<td><select>";
for (var key in data) {
var value = data[key];
output_string += "<option value=" + key + ">" + value + "</option>";
}
output_string += "</select></td>";
return output_string;
}
</script>
I intentionally segregated server-side code (server.php file) and js code. 我故意将服务器端代码(server.php文件)和js代码分开。 Why?
为什么? You should not mix code from server-side and client-side, use power of ajax technologies.
您不应混合使用服务器端和客户端的代码,而应使用ajax技术的强大功能。 Add to server.php your code that echo's all necessary data (in your case - your fetch_assoc).
将您的代码添加到server.php中,以回显所有必要的数据(在您的情况下为-fetch_assoc)。 Learn about MVC model https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
了解有关MVC模型的信息https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
I also added JSON.parse function. 我还添加了JSON.parse函数。 JSON is standard of data compression and submission, check json_encode/json_decode functions in PHP and use them
JSON是数据压缩和提交的标准,请检查PHP中的json_encode / json_decode函数并使用它们
Don't use tables a lot, practice divs/spans 不要经常使用表格,练习div / span
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.