我有一个动态添加和删除元素的表单。我还有一个动态填充的下拉列表。
我怎样才能把两者结合起来？
以下是我用来动态添加和删除元素的代码：
$(document).ready(function(e) {
var maxRows = 100;
var x = 1;
var phpcode = '<?php $stmt=$author_of_book->read_author_of_section(); $num=$stmt->rowCount(); if($num>0){ echo '<select name="author_of_book[]" id="author_of_book-list">'; echo '<option value="" disabled selected>Select</option>'; while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ extract($row); echo '<option value="' .$row["author_of_book"]. '"data-author_of_book_id="' .$row["author_of_book_id"]. '">' .$row["author_of_book"]. '</option>'; } echo "</select>"; } ?>';
$("#add").click(function(e) {
if (x <= maxRows) {
$("#book_table").append("<tr><td>" + phpcode + "</td><td><select name='book_title[]' id='book_title-list'><option value='0' disabled selected>Select</option></select></td><td><button type='button' id='remove' class='btn btn-danger'>Remove</span></button></td></tr>");
}
});
$("#book_table").on('click', '#remove', function(e) {
$(this).closest('tr').remove();
});
});
这个想法是用户可以添加任意数量的书。当用户选择特定作者时，下一个下拉列表将列出该作者所有书籍的标题。
使用这段PHP代码，我根据前面的下拉选择动态填充了一个下拉列表：
我已经创建了两个类文件。
class author_of_book{
// database connection and table name
private $conn;
private $table_name = "author_of_book";
// object properties
public $author_of_book_id;
public $author_of_book;
public function __construct($db){
$this->conn = $db;
}
public function read_author_of_book(){
$query = "SELECT author_of_book_id, author_of_book
FROM " . $this->table_name . "
ORDER BY author_of_book";
// prepare query statement
$stmt = $this->conn->prepare($query);
// execute query
$stmt->execute();
return $stmt;
}
}
这是另一个类文件：
class book_title{
// database connection and table name
private $conn;
private $table_name = "book_title";
// object properties
public $book_title_id;
public $author_of_book_id;
public $book_title;
public function __construct($db){
$this->conn = $db;
}
public function read_book_title(){
$query = "SELECT book_title_id, author_of_book_id, book_title
FROM " . $this->table_name . "
WHERE author_of_book_id = :author_of_book_id
ORDER BY book_title";
// prepare query statement
$stmt = $this->conn->prepare($query);
// santize
$this->author_of_book_id=strtoupper(htmlspecialchars(strip_tags($this->author_of_book_id)));
// bind value
$stmt->bindParam(":author_of_book_id", $this->author_of_book_id);
// execute query
$stmt->execute();
return $stmt;
}
}
我还有这个json文件的php代码
// set json headers
header("Access-Control-Allow-Methods: GET");
header('Content-Type: application/json');
$author_of_book_id=isset($_GET['author_of_book_id']) ? $_GET['author_of_book_id'] : die('Author ID not found.');
// include database and object files
include_once 'config/database.php';
include_once 'objects/book_title.php';
// instantiate database and object
$database = new Database();
$db = $database->getConnection();
$book_title = new book_title($db);
$book_title->author_of_book_id = $author_of_book_id;
$stmt = $book_title->book_title();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($results);
然后在表单中，我使用此代码在javascript 的帮助下呈现下拉列表
// include database and object files
include_once 'config/database.php';
include_once "objects/author_of_book.php";
// instantiate database and objects
$database = new Database();
$db = $database->getConnection();
$qfs_section = new author_of_book($db);
$page_title = "Book Form";
include_once "layout_head.php";
?>
<table id="book_table">
<tr>
<th>Author</th>
<th>Title</th>
<th><button type="button" id="add">Add</button></th>
</tr>
</table>
<?php
include_once "layout_foot.php";
最后是JavaScript代码，使动态下拉工作
//Author
$(document).ready(function() {
// detect change of dropdown
$("#author_of_book-list").change(function() {
// get id of selected author
var author_of_book_id = $(this).find(':selected').data('author_of_book_id');
// set json url
var json_url = "book_title_type_json.php?author_of_book_id=" + author_of_book_id;
// get json data
jQuery.getJSON(json_url, function(data) {
// empty contents of book_title dropdown
$("#book_title-list").html("");
$("#book_title-list").append("<option value='0' disabled selected>Select</option>");
// put new dropdown values to book_title dropdown
jQuery.each(data, function(key, val) {
$("#book_title-list").append('<option value="' + val.book_title + '"data-book_title_id="' + val.book_title_id + ' ">' + val.book_title + '</option>')
});
});
});
});
我的问题是，每次我将下拉代码合并到动态添加-删除代码中时，都会出现问题。我第一次去上班，但第二次没去。
您需要使用AJAX。请看，PHP解释器所做的是将HTML和JavaScript生成为字符串，并以这种方式发送到浏览器。因此，为了让JavaScript获得存储在PHP中的值，它需要与服务器进行通信。这就是VanillaJavaScript中的XMLHttpRequest对象，或者JQueryAJAX的作用所在
或者，如果您只想在将JavaScript发送到浏览器之前执行嵌入JavaScript中的PHP代码，则可以将其放在没有引号的位置。就像我在这里所做的：
var highscore=<?php echo """.$highscore."";"; ?>