我希望使用PHP和jQuery实现以下功能
https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegNow
步骤
- 从下拉列表中选择一个国家。
- 城市下拉列表将自动填充所选国家的城市列表。
- 如果该国家有州,则会显示州列表及该国家的所有州列表。
然后我需要验证所选城市、州和国家。
你有什么想法吗?
提前致谢。
我希望使用PHP和jQuery实现以下功能
https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegNow
步骤
然后我需要验证所选城市、州和国家。
你有什么想法吗?
提前致谢。
不完全是你所问的,但这个功能会自动填充用户在浏览器中保存的数据到字段中。
使用HTML自动完成: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/autocomplete
<form method="post">
<input type="text" name="userCountry" id="country-name" autocomplete="on" />
<input type="submit" />
</form>
然后使用PHP验证信息;
<?PHP
/* SANITIZE END-USER INPUTs */
if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {
$_POST = filter_var_array( $_POST, FILTER_SANITIZE_STRING );
}
/* VALIDATE DATA */
if ( isset( $_POST['userCountry'] ) {
$countrys = array( "united states of america", "united kingdom", "australia" );
if ( !in_array( strtolower( $_POST['userCountry'] ), $countrys ) ) {
/* Return a failed response */
return false;
}
}
/* SAVE DATA */
/* Return a successful response */
return true;
?>
或者
你可能需要查看 onChange
然后填充数据。例如。
$("#country-name").change(function () {
$("#state, #city").find("option:gt(0)").remove();
$("#state").find("option:first").text("Loading...");
$.getJSON("/get/states", {
country_id: $(this).val()
}, function (json) {
$("#state").find("option:first").text("");
for (var i = 0; i < json.length; i++) {
$("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#state"));
}
});
});
$("#state").change(function () {
$("#city").find("option:gt(0)").remove();
$("#city").find("option:first").text("Loading...");
$.getJSON("/get/cities", {
state_id: $(this).val()
}, function (json) {
$("#city").find("option:first").text("");
for (var i = 0; i < json.length; i++) {
$("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#city"));
}
});
});
我面临着类似的挑战。不知道你是否也是这样,但在我的情况下,我们需要确保输入的城市确实存在。在项目后期,我们希望能够收集来自世界各地同一城市的条目。而这些结果需要精确。
因此,我们不能让人们同时输入Philadelphia和Philly。我们还希望人们使用城市的英文名称,而不是他们自己语言中的名称。
我找到了一些公共数据库,包括国家、州和城市。例如,在这里:MaxMind。但这是一个大约有300万个城市的列表,我还找到了另一个超过600万个城市的列表。我按照你描述的方式设置了它。选择国家,然后通过AJAX调用获取其中的城市并填充下拉列表。对于荷兰这样的国家,大约需要2秒钟,但对于中国或俄罗斯来说,加载时间就不可接受了。而且这些列表非常庞大,也不太用户友好。
因此,我认为最好让人们在文本字段中输入城市名称,除非城市的匹配真的很重要。
我们现在正在考虑使用Google Maps API来解决我们的问题。
这是一个非常标准的AJAX场景。实际上,您描述的确切问题可能是最常见的入门Ajax示例。您在问题中列出了PHP和jQuery作为标签;同时使用它们将使解决方案变得非常简单。
我的建议是查找使用PHP的jQuery Ajax示例。您几乎肯定会找到您要寻找的内容。
从下拉列表中选择一个国家。
我假设这是从数据库表填充的HTML SELECT
。
不要这样做。你需要一个jQuery Autocomplete,用户开始输入后,你从数据库中提取可能的条目。
如果该国家有州/省,则状态下拉列表将自动填充该国家的所有城市列表。
如果你正在进行邮寄地址验证,你只需要对少数国家进行验证。处理它的一种常见方法是使用隐藏的SELECT
框,当用户选择需要显示省份的国家(比如澳大利亚)时,就可以显示出来。
然后我需要验证所选的城市、州和国家。
请注意,州/省和国家是SELECT
控件,因此它们永远不应该有无效的结果,并且验证城市名称是不可能的。
打印一个带有州列表的下拉菜单 通过方法将州列表ID设置为GET或POST ID, 创建一个SQL城市列表表,并使用PHP调用该表,虽然它需要更长的时间,但它可以工作
var app = angular.module('ganesh', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Charlie's Programming..........";
$scope.countries = {
'USA': {
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
},
'India': {
'AndamanandNicobarIslands' : { },
'AndhraPradesh' : { },
'ArunachalPradesh' : { },
'Assam' : { },
'Bihar' : { },
'Chandigarh' : { },
'Chhattisgarh' : { },
'DadraandNagarHaveli' : { },
'DamanandDiu' : { },
'Delhi' : { },
'Goa' : { },
'Gujarat' : { },
'Haryana' : { },
'HimachalPradesh' : { },
'JammuandKashmir' : { },
'Jharkhand' : { },
'Karnataka' : { },
'Kerala' : { },
'Lakshadweep' : { },
'MadhyaPradesh' : { },
'Maharashtra' : {
'Ahmednagar' : [ ],
'Akola|Alibag' : [ ],
'Amaravati' : [ ],
'Arnala' : [ ],
'Aurangabad' : [ ],
'Aurangabad' : [ ],
'Bandra' : [ ],
'Bassain' : [ ],
'Belapur' : [ ],
'Bhiwandi' : [ ],
'Bhusaval' : [ ],
'Borliai-Mandla' : [ ],
'Chandrapur' : [ ],
'Dahanu' : [ ],
'Daulatabad' : [ ],
'Dighi(Pune)' : [ ],
'Dombivali' : [ ],
'Goa' : [ ],
'Jaitapur' : [ ],
'Jalgaon' : [ ],
'JawaharlalNehru(NhavaSheva)' : [ ],
'Kalyan' : [ ],
'Karanja' : [ ],
'Kelwa' : [ ],
'Khopoli' : [ ],
'Kolhapur' : [ ],
'Lonavale' : [ ],
'Malegaon' : [ ],
'Malwan' : [ ],
'Manori' : [ ],
'MiraBhayandar' : [ ],
'Miraj' : [ ],
'Mumbai(exBombay)' : [ ],
'Murad' : [ ],
'Nagapur' : [ ],
'Nagpur' : [ ],
'Nalasopara' : [ ],
'Nanded' : [ ],
'Nandgaon' : [ ],
'Nashik' : ['422606', '422004', '422002', '422003'],
'NaviMumbai' : [ ],
'Nhave' : [ ],
'Osmanabad' : [ ],
'Palghar' : [ ],
'Panvel' : [ ],
'Pimpri' : [ ],
'Pune' : [ ],
'Ratnagiri' : [ ],
'Sholapur' : [ ],
'Shrirampur' : [ ],
'Shriwardhan' : [ ],
'Tarapur' : [ ],
'Thana' : [ ],
'Thane' : [ ],
'Trombay' : [ ],
'Varsova' : [ ],
'Vengurla' : [ ],
'Virar' : [ ],
'Wada' : [ ],
'Panvel' : [ ],
'Pimpri' : [ ],
'Pune' : [ ],
'Ratnagiri' : [ ],
'Sholapur' : [ ],
'Shrirampur' : [ ],
'Shriwardhan' : [ ],
'Tarapur' : [ ],
'Thana' : [ ],
'Thane' : [ ],
'Trombay' : [ ],
'Varsova' : [ ],
'Vengurla' : [ ],
'Virar' : [ ],
'Wada' : [ ],
},
'Manipur' : { },
'Meghalaya' : { },
'Mizoram' : { },
'Nagaland' : { },
'Orissa' : { },
'Pondicherry' : { },
'Punjab' : { },
'Rajasthan' : { },
'Sikkim' : { },
'TamilNadu' : { },
'Telangana' : { },
'Tripura' : { },
'Uttaranchal' : { },
'UttarPradesh' : { },
'WestBengal' : { }
},
'Australia': {
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
}
};
$scope.GetSelectedCountry = function () {
$scope.strCountry = document.getElementById("country").value;
};
$scope.GetSelectedState = function () {
$scope.strState = document.getElementById("state").value;
};
$scope.GetSelectedcity = function () {
$scope.strCity = document.getElementById("city").value;
};
$scope.GetSelectedpin = function () {
$scope.strPin = document.getElementById("pin").value;
};
});
<!DOCTYPE html>
<html ng-app="ganesh">
<head>
<meta charset="utf-8" />
<title>Charlie</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>
<body >
<div ng-controller="MainCtrl">
<p>Welcome to {{name}}</p>
<label for="country">Country *</label>
<select id="country" ng-model="statessource" ng-options="country for (country, states) in countries"
ng-change="GetSelectedCountry()">
<option value=''>Select</option>
</select>
<label for="state">State *</label>
<select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource"
ng-change="GetSelectedState()"><option value=''>Select</option>
</select>
<label for="city">City *</label>
<select id="city" ng-disabled="!model.state" ng-model="model.city" ng-options="city for (city, pin) in model.state"
><option value=''>Select</option>
</select>
<label for="pin">Pincode *</label>
<select id="pin" ng-disabled="!model.city" ng-model="model.pin" ng-options="pin for pin in model.city"
><option value=''>Select</option>
</select>
</div>
</body>
</html>