使用 jquery 和框的单击事件自动填充国家/地区名称列表框
我的表单有一个询问用户所在国家/地区的列表框，但我只想通过 AJAX 调用填充该列表框（如果该框尚未显示用户所在国家/地区）。 最初，列表框仅包含一个国家/地区 - 该国家/地区是从服务器上的 ip 到国家/地区查找返回的国家/地区。
列表框的默认操作似乎发生在我的事件操作之前。 我希望首先执行我的操作，以便当用户单击列表框时，该框会在框打开之前预先填充从服务器拉出的国家/地区。
感谢您的任何建议。
$().ready(function() {
$('select#selCountry').one('click', function() {
var selCountry = $('select#selCountry');
var selected = $(selCountry).val();
selCountry.html('<option value="">Loading...</option>');
$.getJSON('/AjaxHelpers/CountryList', function(data) {
if (data.length) {
var options = '';
for (var i = 0; i < data.length; i++) {
var key = data[i].Key;
var val = data[i].Value;
options += '<option value="' + key + '"';
if (key == selected) {
options += ' selected="selected"';
}
options += '>' + val + '</option>';
}
selCountry.html(options);
}
else {
selCountry.html('<option value="">Failed.</option>');
}
});
});
});
HTML：
<div>
<select id="selCountry" name="CountryCode"><option value="GB">United Kingdom</option>
My form has a list box that asks for the user's country but I only want to populate the list box, via an AJAX call, if the box doesn't already show the user's country. Initially the list box contains just one country - the country returned from a ip-to-country lookup on the server.
It appears that the default action of the list box occurs before my event action. I'd like to have my action occur first so that when the user clicks the list box, the box is pre-populated with the countries pulled off the server before the box opens.
Thanks for any suggestions.
$().ready(function() {
$('select#selCountry').one('click', function() {
var selCountry = $('select#selCountry');
var selected = $(selCountry).val();
selCountry.html('<option value="">Loading...</option>');
$.getJSON('/AjaxHelpers/CountryList', function(data) {
if (data.length) {
var options = '';
for (var i = 0; i < data.length; i++) {
var key = data[i].Key;
var val = data[i].Value;
options += '<option value="' + key + '"';
if (key == selected) {
options += ' selected="selected"';
}
options += '>' + val + '</option>';
}
selCountry.html(options);
}
else {
selCountry.html('<option value="">Failed.</option>');
}
});
});
});
HTML:
<div>
<select id="selCountry" name="CountryCode"><option value="GB">United Kingdom</option>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
该行
是推迟 Ajax 调用的内容，直到您单击该框。 尝试将其更改为简单的
或仅删除该行及其右大括号。
the line
is what's postponing the Ajax call until you click on the box. Try changing it to simply
or just removing that line and its closing brace.
这会好得多，你只需输入以下内容即可：
County: Spain change
当他们单击更改时，替换带有所有国家/地区下拉框的国家/地区名称。
This would be much better you just had something like:
County: Spain change
When they click change, replace the country name with a drop down box of all the countries.
对于选择点击事件，您将不会有跨浏览器的乐趣。 只有改变事件才得到所有人的支持，因此你需要重新考虑。
一种选择是使用显示 IP 国家/地区的标签，如果用户想要更改它，他们单击标签旁边的按钮，然后创建＆amp; 填充选择并替换标签。
You will have no joy cross browser with the select click event. Only the change event is supported by all therefore you need to rethink.
One option would be is to use a label which shows the ip country and if the user wants to change it they click a button next to the label which then creates & populates a select and replaces the label.