How to make particular sub-select options appear when the value of the parent select option is changed
Question
I am creating Select option.
Example: It's a sort of code I will be using for categories. When user selects on of the parent select's option another select option to be displayed as sub category of that category.
My code:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<select>
<option value="car">car</option>
<option value="phone">phone</option>
<option value="tv">tv</option>
</select>
<select>
<option value="toyota">toyota</option>
<option value="nissan">nissan</option>
<option value="bmw">BMW</option>
</select>
</form>
3 answers
solution1
1 ACCPTED 2017-03-29 11:54:38
$("#select1").change(function() { if ($(this).data('options') == undefined) { /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options', $('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="select1" id="select1"> <option value=""></option> <option value="1">car</option> <option value="2">phone</option> <option value="3">tv</option> </select> <select name="select2" id="select2"> <option value=""></option> <option value="1">toyota</option> <option value="1">nissan</option> <option value="1">bmw</option> <option value="2">Iphone</option> <option value="2">LG</option> <option value="2">Samsung</option> <option value="3">Philips</option> <option value="3">Samsung</option> </select>
solution2
0 2017-03-29 12:15:18
$("#select1").change(function () { if ($(this).data('options') == undefined) { $(this).data('options', $('#select2 option').clone()); } var id = $(this).val(); if (id == "all") { var options = $(this).data('options'); $('#select2').html(options); } else { var options = $(this).data('options').filter('[data-name=' + id + ']'); $('#select2').html(options); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="select1" id="select1"> <option value="all">All</option> <option value="1">car</option> <option value="2">phone</option> <option value="3">tv</option> </select> <select name="select2" id="select2"> <option value="all">All</option> <option data-name="1" value="toyota">toyota</option> <option data-name="1" value="nissan">nissan</option> <option data-name="1" value="bmw">bmw</option> <option data-name="2" value="Iphone">Iphone</option> <option data-name="2" value="LG">LG</option> <option data-name="2" value="Samsung">Samsung</option> <option data-name="3" value="Philips">Philips</option> <option data-name="3" value="Samsung">Samsung</option> </select>
solution3
0 2020-11-08 12:42:01
I have a simple solution to select states depending on a country php/javascript/Mysql
MySQL tables
country
country_code varhar(5),
country_name varchar(100)
state
country_code varhar(5),
state_code varchar(5),
country_name varchar(100)
Country/State selection in Main php file main.php
<html>
<body>
Country
<?php
$sql="SELECT * FROM country order by country_name";
$rs=$conn->Execute($sql);
echo '<select value="'.$country_code.'" name="country_code" id="country_list" onChange="stateList(this.value);" />';
echo '<option value="">--Select--</option>';
$rs->MoveFirst();
while (!$rs->EOF) {
echo '<option value="'.$rs->fields['country_code'].'"';
if ($rs->fields['country_code'] == $country_code) {echo " selected";}
echo '>'.$rs->fields['country_name'].'</option>';
$rs->MoveNext();
}
echo '</select>';
?>
State
<?php
$sql="SELECT * FROM state where contry_code = '$country_code' order by state_name";
$rs=$conn->Execute($sql);
echo '<select value="'.$state_code.'" name="state_code" id="state_list" />';
echo '<option value="">--Select--</option>';
$rs->MoveFirst();
while (!$rs->EOF) {
echo '<option value="'.$rs->fields['state_code'].'"';
if ($rs->fields['state_code'] == $state_code) {echo " selected";}
echo '>'.$rs->fields['state_name'].'</option>';
$rs->MoveNext();
}
echo '</select>';
?>
</body>
</html>
Java Script
<script type="text/javascript">
function stateList(val) {
var select = document.getElementById( "state_list" );
var url = "ge_statelist.php?country_code="+val;
$.post( url, function( data ) {
$("#state_list").empty();
var data1 = data.split("|");
for (var x = 0; x < data1.length; x++) {
var data2 = data1[x].split("=");
$('#state_list').append('<option value="'+data2[0]+'"> '+data2[1]+' </option>')
}
})
</script>
get_stataelist.php
** In this, the result is echoing country code=name pair seperated by '|' character
** Eg. Echoing string KL=Kerala|TN=Tamil Nadu ...... for the country IN - India
<?php
session_start();
require_once 'functions.php';
$country_code = $_GET['country_code'];
$conn = connect_db() //Make you own connection entry conn with Server,DB User ID, DB Password and DB Name
if ($country_code != "") {
$sql="SELECT * FROM state where coutry_code = '$country_code' order by country_name";
$rs=$conn->Execute($sql);
echo '=--Select--';
$rs->MoveFirst();
while (!$rs->EOF) {
echo "|".$rs->fields['state_code']."=".$rs->fields['state_name'];
$rs->MoveNext();
}}
else {
echo "=--Not found--";
}
?>
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.
Related Question
MySQL select query with sub-select as column
Showing sub-category list when an option select in parent category
how to change a select list option when other select list changed?
how to change value of select options based on another select option selected?
mySQL - SELECT using JOIN, or a nested SELECT (sub-select)?
I used loop to populate <select> options, how do make the select box show current option instead of the highest value?
Make div appear on dynamic option select
How do l hide an alert div when the option of a select is changed?
How can I refresh second select option when first select option is changed?
hide option select value based on option value selected on first options
Related Tags