链式选择框（国家，州，市） [英] Chained Select Boxes (Country, State, City)
问题描述
我有一个PHP页面，在这里我想从国家，州和城市的列表中选择一个位置。该页面包含的其他数据进行用户注册（姓名，电子邮件等），所以我不想刷新页面或任何时候，选择框刷新。目前，每一个选择框只加载国家，州或城市的完整列表。我想将它们链接，所以我没有重复的城市名称（相同的名称在不同的州或国家）。
的位置将被存储在数据库中，并且被传递到页上的负荷。然后，他们通过循环并添加到选择框：
＆LT; TR＆GT;
＆LT;标签＆gt;选择国家：LT; /标签＆gt;
＆LT;选择名称=状态ID =state_select的风格=宽度：200像素;＆GT;
＆LT;期权价值=＆GT;选择一个州或省及LT; /选项＆GT;
＆LT; PHP而（$状态= $明─＆GT; fetchObject（））{＆GT;
＆LT;期权价值=＆LT; PHP的echo $语句＆GT; ID;＆gt;中＆GT;＆LT; PHP的echo $语句＆GT;称号; ？＆GT;＆LT; /选项＆GT;
＆LT; PHP}＆GT？;
＆LT; /选择＆GT;
＆LT; / TR＆GT;
数据库结构为pretty的简单：
国家：| ID |标题|
状态：| ID |标题| COUNTRY_ID |
城市：| ID |标题| STATE_ID |
我能想到的逻辑在.onChange（）语句的应的清除链接的选择框，并追加新的选择，但我很新的基于Web的语言，我不能得到任何东西加工。下面是我的尝试，但我想我能JS和PHP之间轻松不引用。注：我知道这个片断是真的不好，有错误。我的想法是有一个脚本函数执行以下操作：
- 清除出国家选择框中的所有选项（假设你已经改变了这个国家的选择）
- 通过国家提供的清单（SQL查询通过的控制器）环
- 将一个选择项为具有COUNTRY_ID相匹配的选择COUNTRY_ID 每个条目的国家选择框
^这将是美妙的，如果这是可能的。任何其他方法将是一件好事，但我已经使用AJAX和JSON方法试过，我真的不理解他们。
＆LT;脚本SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆LT; / SCRIPT＆GT ;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'＃country_select'）。改变（函数（）{
$（'＃state_select）空（）;
//对于每一个状态
＆LT; PHP而（$状态= $明─＆GT; fetchObject（））{
$ TEMP = $（'＃country_select）VAL（））。
//如果国家选定的国家相匹配
如果（$语句＆GT; COUNTRY_ID == $ TEMP）{
//创建一个选项＆GT？;
VAR的选择='＆LT;期权价值=＆GT;测试＆LT; /选项＆GT;';
＆LT; PHP //}
//然后追加该选项＆GT？;
＆LT; PHP //}＆GT？;
$（'＃state_select）追加（可选）。
}）;
}）;
＆LT; / SCRIPT＆GT;
$（'＃mobile_phone_network选项：选择）。VAL（）我没有测试，但它应该工作。很简单，它会给你一些想法
** HTML **
＆LT; DIV ID =countryWrap＆GT;＆LT;选择一个id =国家名称=国家＆GT;＆LT; /选择＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =stateWrap＆GT;＆LT;选择一个id =状态NAME =状态＆GT;＆LT; /选择＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =cityWrap＆GT;＆LT;选择一个id =城市NAME =城市和GT;＆LT; /选择＆GT;＆LT; / DIV＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'＃国）。改变（函数（）{
LoadState的（$（本）.find（'：选择）。VAL（））
}）
$（'＃状态）。改变（函数（）{
loadCity（$（本）.find（'：选择）。VAL（））
}）
}）
功能loadCountry（）{
$阿贾克斯（{
键入：POST，
网址：AJAX / ajax.php
数据：得=国
}）。完成（功能（结果）{
$（结果）。每个（函数（）{
$（＃国）追加（$（'＆LT;选项＆GT;'，{
值：this.id，
文字：this.name，
}））;
}）
}）;
}
功能LoadState的（countryId）{
$（＃状态）。子女（）。删除（）
$阿贾克斯（{
键入：POST，
网址：AJAX / ajax.php
数据：得=态放大器; countryId =+ countryId
}）。完成（功能（结果）{
$（结果）。每个（函数（）{
$（＃状态）追加（$（'＆LT;选项＆GT;'，{
值：this.id，
文字：this.name，
}））;
}）
}）;
}
功能loadCity（STATEID）{
$（＃城市）。子女（）。删除（）
$阿贾克斯（{
键入：POST，
网址：AJAX / ajax.php
数据：得=城市和放大器; STATEID =+ STATEID
}）。完成（功能（结果）{
$（结果）。每个（函数（）{
$（＃城）追加（$（'＆LT;选项＆GT;'，{
值：this.id，
文字：this.name，
}））;
}）
}）;
}
//初始化国家
loadCountry（）;
＆LT; / SCRIPT＆GT;
** ajax.php **
$ countryId =使用isset（$ _ POST ['countryId']）？ $ _ POST ['countryId']：0;
$ STATEID =使用isset（$ _ POST ['STATEID']）？ $ _ POST ['STATEID']：0;
$命令=使用isset（$ _ POST ['得到']）？ $ _ POST ['得到']：;
开关（$命令）{
案国：
$声明=SELECT ID，名称从一个国家;
打破;
案状态：
$声明=SELECT ID，名字从状态COUNTRY_ID =（INT）countryId。
打破;
案城：
$声明=SELECT ID，名字从国家，STATE_ID =（INT）STATEID。
打破;
默认：
打破;
}
而$ sth = $ dbh-＆GT; prepare（$语句）;
$ sth-＆GT;执行（）;
$结果= $ sth-＆GT;使用fetchall（）;
回声json_en code（$结果）;
出口（）;
I have a php page where I would like to select a location from a list of countries, states, and cities. The page contains other data for user signup (name, email, etc) so I don't want to refresh the page or anything when the select boxes refresh. Currently, each of the select boxes just load the full list of countries, states, or cities. I want them to be chained so I don't have duplicate city names (same name in different states or countries).
Locations are stored in a database, and are passed to the page on load. They are then looped through and added to the select box:
<tr>
<label>Select State: </label>
<select name="state" id="state_select" style="width:200px;">
<option value="">Select a State or Province</option>
<?php while($state = $states->fetchObject()) { ?>
<option value="<?php echo $state->id; ?>"><?php echo $state->title; ?></option>
<?php } ?>
</select>
</tr>
Database structure is pretty simple:
Country : | id | title |
State : | id | title | country_id |
City : | id | title | state_id |
I can think of logic in an .onChange() statement that should clear the chained select box and append new options, but I am very new to web based languages and I can't get anything working. Below is my attempt, but I guess I can't reference between js and php easily. Note: I am aware that this snippet is really bad and contains errors. My thoughts were to have a script function that does the following:
- Clear out all options in the State selection box (assuming you have changed the country selection)
- Loop through the supplied list of states (SQL query passed by the controller)
- Put a selection option in the State selection box for each entry that has a 'country_id' that matches the selected country_id
^ This would be fantastic if it is possible. Any other methods would be good too, but I have tried using ajax and JSON methods and I honestly don't understand them.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#country_select').change(function(){
$('#state_select').empty();
//for each state
<?php while($state = $states->fetchObject()) {
$temp = $('#country_select').val());
//if country matches selected country
if($state->country_id == $temp){
// create an option ?>
var option = '<option value="">Test</option>';
<?php// }
//then append that option?>
<?php// } ?>
$('#state_select').append(option);
});
});
</script>
$('#mobile_phone_network option:selected').val()i didn't tested but it should work. It's simple and it will give you some idea
**HTML**
<div id="countryWrap"><select id="country" name="country"></select></div>
<div id="stateWrap"><select id="state" name="state"></select></div>
<div id="cityWrap"><select id="city" name="city"></select></div>
<script>
$(document).ready(function(){
$('#country').change(function(){
loadState($(this).find(':selected').val())
})
$('#state').change(function(){
loadCity($(this).find(':selected').val())
})
})
function loadCountry(){
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=country"
}).done(function( result ) {
$(result).each(function(){
$("#country").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
function loadState(countryId){
$("#state").children().remove()
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=state&countryId=" + countryId
}).done(function( result ) {
$(result).each(function(){
$("#state").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
function loadCity(stateId){
$("#city").children().remove()
$.ajax({
type: "POST",
url: "ajax/ajax.php",
data: "get=city&stateId=" + stateId
}).done(function( result ) {
$(result).each(function(){
$("#city").append($('<option>', {
value: this.id,
text: this.name,
}));
})
});
}
// init the countries
loadCountry();
</script>
**ajax.php**
$countryId = isset($_POST['countryId']) ? $_POST['countryId'] : 0;
$stateId = isset($_POST['stateId']) ? $_POST['stateId'] : 0;
$command = isset($_POST['get']) ? $_POST['get'] : "";
switch($command){
case "country":
$statement = "SELECT id, name FROM country";
break;
case "state":
$statement = "SELECT id, name FROM state WHERE country_id=".(int)countryId;
break;
case "city":
$statement = "SELECT id, name FROM country WHERE state_id=".(int)stateId;
break;
default:
break;
}
$sth = $dbh->prepare($statement);
$sth->execute();
$result = $sth->fetchAll();
echo json_encode($result);
exit();
这篇关于链式选择框（国家，州，市）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
