How can I make my dynamic drop-down list be dependent dependent also to parent drop down?
Question
I have a dependent drop-down list. The sub_cat is dependent on parent_cat
at the same time it is dynamic also, where user can add additional if needed.
And my problem starts here, Drop down dependent is already working, where the second drop-down sub_cat is dependent to what is selected in the first drop-down parent_cat . but, when I click Add Process (add additional) sub_cat . sub_cat is now empty.
How can I make it work that if I click add process, the sub_cat will be populated also depends on what is selected in parent_cat.
here's my code: index.php
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/loadScript.js"></script>
<script type="text/javascript" src="js/dynamic.js"></script>
</head>
<body>
<form method="GET" action="input.php">
<label for="category">Parent Category</label>
<?php
echo'<select name="parent_cat" id="parent_cat">';
while($row = $query_parent->fetch()) {
echo '<option value="'.$row['w_id'].'">' . $row['wafer_type'] . '</option>';
}
echo '</select>';
?>
<br/>
<?php
require 'second_dd.php';
?>
<input type="button" name="add_item" value="Add Process " onClick="addMore()" />
<br><br>
<input type="submit">
</form>
</body>
</html>
second_dd.php
<div id="product">
<select name="sub_cat[]" id="sub_cat"></select>
</div>
loadsubcat.php
<?php
include 'db/pdo-connect.php';
$parent_cat = $_GET['parent_cat'];
$query = $conn->prepare("SELECT * FROM process WHERE wafer_id = {$parent_cat}");
$query->execute();
while($row = $query->fetch()) {
echo '<option value="'.$row['p_id'].'">' . $row['process_name'] . '</option>';
}
?>
loadscript.js
$(document).ready(function() {
$("#parent_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
$("#sub_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
dynamic.js - this is for adding second dropdown list.
function addMore() {
$("<div>").load("second_dd.php", function() {
$("#product").append($(this).html());
});
}
my DB goes like this:
parent_cat
id, category
sub_cat
id, category_id, sub_category
1 answers
solution1
0 2015-01-20 03:14:24
What does file dynamic.php do ?
The selector $("<div>") is not right which cannot find any element, and .load function wont execute the script. just load the file content.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.