У меня есть форма, которая динамически добавляет и удаляет элементы. У меня также есть выпадающий список, который заполняется динамически.
Как я могу соединить два?
Вот код, который я использую для динамического добавления и удаления элементов:
$(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();
});
});
Идея состоит в том, что пользователь может добавить столько книг, сколько он будет sh. Когда пользователь выбирает конкретного автора, в следующем раскрывающемся списке будут перечислены названия всех книг автора.
Используя этот код 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;
}
}
У меня также есть этот код php для файла json
// 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 код для создания Dynami c выпадающая работа
//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>')
});
});
});
});
Моя проблема в том, что каждый раз, когда я включаю свой выпадающий код в динамический c код добавления-удаления, что-то идет не так. Я смог сделать первый выпадающий на работу, но не второй.