[英]How to make particular sub-select options appear when the value of the parent select option is changed
我正在創建選擇選項。
示例:這是一種我將用於類別的代碼。 當用戶選擇父選擇的選項時,另一個選擇選項將顯示為該類別的子類別。
我的代碼:
<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>
$("#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>
$("#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>
我有一個簡單的解決方案來根據國家/地區選擇州 php/javascript/Mysql
MySQL表
country
country_code varhar(5),
country_name varchar(100)
state
country_code varhar(5),
state_code varchar(5),
country_name varchar(100)
主 php 文件 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 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--";
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.