我想使用 PHP 和 jQuery 做以下事情
https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegNow
脚步
- 从下拉列表中选择一个国家。
- 城市下拉列表将自动填充所选国家/地区的城市列表。
- 如果该国家有可用的州，则州列表将与该国家的所有州列表一起可见。
然后我需要验证所选的城市、州和国家。
你有什么想法？
提前致谢
问问题
12729 次
8 回答
13
如果您想让外国人更容易输入地址，那么只需提供一个文本字段，地址可以作为格式化文本输入。很少有国家使用州（或类似的东西）作为地址的一部分，我不明白您为什么要提供带有城市的下拉列表。德国城市列表（或更准确、有效的邮政地址中的地名）将包含大约 23,000 个条目。你觉得哪个更容易，输入地址或尝试在这样的列表中找到地名_
于 2010-02-08T11:04:13.430 回答
1
我们所做的是使用 ServiceObjects.com 来验证地址。
因此，我们让用户在纯文本字段（或多或少）中输入他们的地址，然后简单地将地址详细信息发送到 ServiceObjects.com，并使用他们的 Web 服务返回的规范化/更正后的地址。
这不是直接回答您的问题，但也许它为根本问题提供了另一种解决方案。
于 2010-05-12T00:04:58.123 回答
0
Select a country from a dropdown list.
I assume this is an HTML SELECT populated from a database table.
The city dropdown list will fillup automatically with the list of cities of the selected country.
Don't do this. What you want is a jQuery Autocomplete, where the user starts to type and then you pull possible entries from your database.
If state is available for that country then state list will be visible with all state list of that country.
If you are doing mailing address validation, you only need this for a small number of countries. One common way of handling it is to have hidden SELECT boxes, and when the user picks a country (say, Australia) where you need to show the provinces, do it.
Then I need to validate the selected city, state and country.
Note that State/Province and Country are SELECT controls, so they should never have an invalid result, and validating city names is not possible.
于 2010-05-12T00:20:40.630 回答
0
我面临着类似的挑战。我不知道您是否是这种情况，但就我而言，我们需要确保输入的城市确实是现有城市。稍后在项目中，我们希望能够收集世界任何地方的同一城市的条目。这些结果需要精确。所以我们不能让人们也进入费城和费城。我们还希望人们使用城市的英文名称而不是他们自己语言的名称。
我找到了一些国家、州和城市的公共数据库。例如这里：MaxMind。但这是一个大约 300 万个城市的列表，我发现另一个超过 600 万个城市。我已经按照您描述的方式进行了设置。选择国家，然后通过 AJAX 调用获取其中的城市并填写下拉列表。对于像荷兰这样的国家来说，这大约需要 2 秒，但对于中国或俄罗斯来说，加载是不可接受的。而且列表很大，而且根本不是用户友好的。
所以我认为最好让人们在文本字段中输入它们，因为城市真的全部匹配并不那么重要。我们现在正在研究 Google Maps API 来解决我们的问题。
于 2010-02-08T21:39:36.427 回答
0
这是一个非常标准的 AJAX 场景。事实上，您描述的确切问题可能是最常见的 Ajax 介绍性示例。您已将 PHP 和 jQuery 列为问题的标签；一起使用这些将使解决方案变得非常简单。
我的建议是使用 PHP 查找 jQuery Ajax 示例。你几乎肯定会找到你正在寻找的东西。
于 2010-02-08T21:50:59.667 回答
0
不要退出你的要求，但是这会自动填充用户数据的字段，并保存在他们的浏览器中。
使用 HTML 自动完成： https ://developer.mozilla.org/en-US/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"));
}
});
});
于 2021-08-16T23:56:08.340 回答
-1
打印带有状态列表的下拉列表使状态的列表ID通过方法获取或发布ID，制作一个sql城市列表表并使用php调用该表比jquery花费更多时间，但它可以工作
于 2013-05-10T10:00:21.077 回答
-1
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>于 2018-03-19T08:01:38.557 回答