Dropdown Options Is Dependent From Another Dropdown Options (all Value From Database)
Solution 1:
Here is an example that you can customize to do what you want. Essentially, you can use jQuery / AJAX to accomplish this.
The example below creates a second drop-down box, populated with the values found. If you follow the logic line by line, you will see it is actually quite simple. I left in several commented-out lines that, if uncommented (one at a time) will show you what the script is doing at each stage.
FILE 1 -- TESTER.PHP
<html><head><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">
$(function() {
//alert('Document is ready');
$('#stSelect').change(function() {
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function() {
alert('You clicked the button');
});
} //END success fn
}); //END $.ajax
}); //END dropdown change event
}); //END document.ready</script></head><body><selectname="students"id="stSelect"><optionvalue="">Please Select</option><optionvalue="John">John Doe</option><optionvalue="Mike">Mike Williams</option><optionvalue="Chris">Chris Edwards</option></select><divid="LaDIV"></div></body></html>FILE 2 - another_php_file.php
<?php//Login to database (usually this is stored in a separate php file and included in each file where required)$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) ordie($connect_error); //or die(mysql_error());
mysql_select_db($dbname) ordie($connect_error);
//Get value posted in by ajax$selStudent = $_POST['theOption'];
//die('You sent: ' . $selStudent);//Run DB query$query = "SELECT * FROM `category` WHERE `master` = 0";
$result = mysql_query($query) ordie('Fn another_php_file.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
//die('Query returned ' . $num_rows_returned . ' rows.');//Prepare response html markup$r = '
<h1>Found in Database:</h1>
<select>
';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few charactersif ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
}
} else {
$r = '<p>No student by that name on staff</p>';
}
//Add this extra button for fun$r = $r . '</select><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the echo$r;
To answer the usual question: "How do you make the 2nd drop down box populate fields that are only relevant to a selected option from the 1st drop down box?"
A. Inside the .change event for the first dropdown, you read the value of the first dropdown box:
$('#dropdown_id').change(function() {
var dd1 = $('#dropdown_id').val();
}
B. In your AJAX code for the above .change() event, you include that variable in the data you are sending to the 2nd .PHP file (in our case, "another_php_file.php")
C. You use that passed-in variable in your mysql query, thereby limiting your results. These results are then passed back to the AJAX function and you can access them in the success: portion of the AJAX function
D. In that success function, you inject code into the DOM with the revised SELECT values.
This is how the above example works:
The user chooses a student name, which fires the jQuery
.change()selectorHere is the line where it grabs the option selected by the user:
var sel_stud = $(this).val();This value is sent to
another_php_file.php, via this line of the AJAX code:data: 'theOption=' + sel_stud,The receiving file
another_php_file.phpreceives the user's selection here:$selStudent = $_POST['theOption'];Var $selStudent (the user's selection posted in via AJAX) is used in the mysql search:
$query = " SELECT * FROM `category` WHERE `master` = 0 AND `name` = '$selStudent' ";
(When changing the example to suit your database, the reference to $selStudent was removed. But this (here, above) is how you would use it).
We now build a new
<SELECT>code block, storing the HTML in a variable called$r. When the HTML is fully built, I return the customized code back to the AJAX routine simply by echoing it back:echo $r;The received data (the customized
<SELECT>code block) is available to us inside the AJAXsuccess: function() {//code block}, and I can inject it into the DOM here:$('#LaDIV').html(whatigot);
And voila, you now see a second dropdown control customized with values specific to the choice from the first dropdown control.
Works like a non-Microsoft browser.
Solution 2:
If i got your question clearly, you can study this code and customize it to suit your needs. its simple and straight forward:
Let say our purpose is to manage movies
<label>Movie Category</label><selectname="movieCategory"id="movieCategory"><optionvalue="">--- S e l e c t ---</option><?php$movieCategory= array("Action","Romance","Horror","Comedy","Music","Interviews");
reset($movieCategory);
while (list($key , $value) = each($movieCategory)) {
echo" <option id='".$value."' value='".$value."'>".$value."</option>";
}
?></select><br><label>Movie SubCategory</label><selectname="subCategory"id="subCategory"><optionvalue="">--- S e l e c t ---</option><?php$subCategory= array("Action","Romance","Horror","Comedy","Music","Interviews");
reset($subCategory);
while (list($key , $subvalue) = each($subCategory)) {
echo" <option id='".$subvalue."' value='".$subvalue."'>".$subvalue."</option>";
}
?></select><scriptlanguage="javascript"type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script><scriptlanguage="javascript"type="text/javascript">
$(function () {
$('select#movieCategory').change(function(){
$('select#subCategory option#'+$(this).val()).attr( "selected" , "selected" )
});
});
</script>
Post a Comment for "Dropdown Options Is Dependent From Another Dropdown Options (all Value From Database)"