[英]One drop down list contents depending on another
I am attempting to create two drop down lists: drop down list A lists a country. 我正在尝试创建两个下拉列表:下拉列表A列出了一个国家。 And drop down list B lists a city.
下拉列表B列出了一个城市。 List B is initially empty while List A is populated by a country.
列表B最初是空的,而列表A是由一个国家填充的。 A user can choose a country, causing List B to automatically list the cities that are in List A. These will naturally come from a database, so this is not the target of my question.
用户可以选择一个国家,从而使列表B自动列出列表A中的城市。这些自然会来自数据库,因此这不是我要提出的目标。 My question is how do I bind List B to be dependent on List A. I've spent a good couple of hours researching the answer and trying out various jquery and javascript methods.
我的问题是如何绑定列表B以使其依赖于列表A。我花了很多时间研究答案,并尝试了各种jquery和javascript方法。 I'm stuck at trying to get List B to respond to List A by using the change method of List A, but thus far, nothing seems to be working, nor am I able to trigger a response from List B in terms of adding test values.
我一直试图通过使用列表A的更改方法来使列表B响应列表A,但到目前为止,似乎没有任何效果,就添加测试而言,我也无法触发列表B的响应值。
How do I do this? 我该怎么做呢?
Here is the working fiddle: Relative Drop-down 这是工作的小提琴: 相对下拉
$(function() {
var cities = {
'INDIA': ['Delhi', 'Mumbai', 'Bangalore', 'Ahmedabad'],
'USA': ['London', 'Los Angeles', 'Austin', 'New York']
};
var hashFunc = function(country, city){
return country + "." + city;
};
//The form
var form = new Backbone.Form({
schema: {
country: { type: 'Select', options: ['INDIA', 'USA'] },
city: { type: 'Select', options: cities.INDIA},
}
}).render();
form.on('country:change', function(form, countryEditor) {
var country = countryEditor.getValue(),
newOptions = cities[country];
form.fields.city.editor.setOptions(newOptions);
});
//Add it to the page
$('body').append(form.el);
});
When any option is selected, Depending on its value, you can create dynamic options to another select. 选择任何选项后,您可以根据其值为其他选择创建动态选项。
$('#A').change(function() {
if($('#A:selected').val() == "India"){
$("<option></option>",
{value: "Surat", text: "Surat"})
.appendTo('#B');
}
});
$('#select1').change(function(){
callAjax(this.value);
});
function callAjax(value1)
{
//here write the code for ajax
}
Hard to answer with out a database scheme but here goes. 没有数据库方案很难回答,但是可以解决。
Assume your DB looks like 假设您的数据库看起来像
Countrys
+--------------+
| New Zealand |
+--------------+
| Australia |
+--------------+
| India |
+--------------+
Towns
Country Town
+--------------+---------------+
| NZL | Auckland |
+--------------+---------------+
| NZL | Wellington |
+--------------+---------------+
| NZL | Christchurch |
+--------------+---------------+
| AU | Sydney |
+--------------+---------------+
| AU | Wagawaga |
+--------------+---------------+
| AU | Brisbane |
+--------------+---------------+
| IN | Mumbai |
+--------------+---------------+
......etc etc ......等
First Select 首先选择
<select onchange ="town()" id="country">
<option value = "NZ">New Zealand</option>
<option value = "AU">Australia</option>
<option value = "IN">India</option>
</select>
second one 第二个
<select id="towns"></select>
Javascript 使用Javascript
function town()
{
var town = $('#country').val()
$.ajax({
type: "POST",
url: "http://yourserver/rpc.php",
data: { method: 'get_towns'},
dataType: "json",
timeout: 10000, // in milliseconds
success: function(data) {
$("#towns".html(data.towns)
},
error: function(request, status, err) {
if(status == "timeout") {
$.ui.hideMask();
alert('This is taking too long. You could try again now, or wait and try again later.');
}
}
});
} }
return towns in json from your db 从您的数据库中返回json中的城镇
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.