Menu
I am building a website to learn coding and am trying to build a tool where a user clicks on a select/dropdown that contains some category names pulled from database cat and then another select will appear with subcategory names pulled from database subcat. This is almost exactly like Yelp's (go down to the categories) like Yelp's (go down to the categories).
I also made a diagram:
I already have a category dropdown that is pulling from cat database:
<p><b>Category:</b><br />
<?php
$query="SELECT id,cat FROM cat";
$result = mysql_query ($query);
echo"<select name='cselect3' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>";
}
echo"</select>";
?>
And I have a subcat that is pulling from subcat database:
<p><b>Subcat1:</b><br />
<?php
$query="SELECT id,subcat FROM subcat";
$result = mysql_query ($query);
echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";
}
echo"</select>";
?>
How do I make a subcategory dropdown based on what the user clicks on category and make it automatically appear? Thanks so much for any and all help!
741
You can use change event on your select-box . Inside this get value of selected option using $(this). val() this will return you array so use for-loop to iterate through value and show options where value matches in second dropdown . Lastly refresh your selectpicker to update changes .
Answer: Use the jQuery ajax() method Populating the state or city dropdown based on the value of option selected by the user in the country dropdown is a very common implementation of Ajax feature that you have seen on many websites while filling the registration form.
We want to change the selects options based on other dropdowns so we will follow the below steps. Create a state variable that is initially null or undefined. Create different arrays for different dropdowns. Create a local variable say type that will hold any of the array based on the dropdown selected.
php include("PDOConnection. php"); if(isset($_POST["country"])){ // Capture selected country $country = $_POST["country"]; // Display city dropdown based on country name if($country !== 'Shoose...'){ $sql= $cnn->prepare("SELECT state.
I would just make put the variables in javascript with php and then use javascript functions.. no jquery or AJAX needed.
However you need to have a foreign key for subcategories no matter what.. ie - For every record in subcat table you need to give it a catid so for referencing...
<?php
$db = new mysqli('localhost','user','password','dbname');//set your database handler
$query = "SELECT id,cat FROM cat";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$categories[] = array("id" => $row['id'], "val" => $row['cat']);
}
$query = "SELECT id, catid, subcat FROM subcat";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']);
}
$jsonCats = json_encode($categories);
$jsonSubCats = json_encode($subcats);
?>
<!docytpe html>
<html>
<head>
<script type='text/javascript'>
<?php
echo "var categories = $jsonCats; \n";
echo "var subcats = $jsonSubCats; \n";
?>
function loadCategories(){
var select = document.getElementById("categoriesSelect");
select.onchange = updateSubCats;
for(var i = 0; i < categories.length; i++){
select.options[i] = new Option(categories[i].val,categories[i].id);
}
}
function updateSubCats(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("subcatsSelect");
subcatSelect.options.length = 0; //delete all options if any present
for(var i = 0; i < subcats[catid].length; i++){
subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
}
}
</script>
</head>
<body onload='loadCategories()'>
<select id='categoriesSelect'>
</select>
<select id='subcatsSelect'>
</select>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
