一个下拉列表的内容依赖于另一个下拉列表
One drop down list contents depending on another
我试图创建两个下拉列表:下拉列表A列出一个国家。下拉列表B列出了一个城市。列表B最初为空,而列表A由国家填充。用户可以选择一个国家,从而使列表B自动列出列表A中的城市。这些自然会来自数据库,所以这不是我问题的目标。我的问题是如何绑定列表B以依赖于列表a。我花了好几个小时研究答案并尝试了各种jquery和javascript方法。我被困在试图让列表B通过使用列表A的更改方法来响应列表A,但到目前为止,似乎没有任何作用,我也无法触发列表B在添加测试值方面的响应。
我该怎么做?
这是工作小提琴:相对下拉
$(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);
});
当任何选项被选中时,根据它的值,您可以为另一个选择创建动态选项。
$('#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
}
在没有数据库方案的情况下很难回答这个问题。
假设您的DB看起来像
Countrys
+--------------+
| New Zealand |
+--------------+
| Australia |
+--------------+
| India |
+--------------+
Towns
Country Town
+--------------+---------------+
| NZL | Auckland |
+--------------+---------------+
| NZL | Wellington |
+--------------+---------------+
| NZL | Christchurch |
+--------------+---------------+
| AU | Sydney |
+--------------+---------------+
| AU | Wagawaga |
+--------------+---------------+
| AU | Brisbane |
+--------------+---------------+
| IN | Mumbai |
+--------------+---------------+
……等等
First Select
<select onchange ="town()" id="country">
<option value = "NZ">New Zealand</option>
<option value = "AU">Australia</option>
<option value = "IN">India</option>
</select>
第二个
<select id="towns"></select>
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.');
}
}
});
}
从db返回json中的城镇
相关文章:
- 如何在php中创建依赖的下拉列表
- 选择的下拉列表:使search_contains同时适用于所有下拉列表
- 依赖下拉列表的数据验证
- 如何使用 jquery 检查该值是否存在于带有标签的 select2 下拉列表中:true
- 使用jquery如何自动删除下拉列表中的第一个空白选项(如果它依赖于另一个选项)
- 如何修改代码以将其应用于三个下拉列表?(Jquery)
- 禁用JavaScript-依赖下拉列表
- javascript动态下拉列表-两种形式相互依赖
- 设置值时,语义UI下拉列表滞后于整个UI
- 数据库中的依赖下拉列表值
- 如何使我的动态下拉列表也依赖于父下拉列表
- 下拉选项依赖于另一个下拉选项(所有值都来自数据库)
- 更改一个下拉列表的值依赖于另一个下拉列表
- 在PHP和jQuery中,使一个下拉列表依赖于另一个下拉列表
- 一个下拉列表的内容依赖于另一个下拉列表
- 一个下拉列表依赖于另一个
- 创建两个依赖于第一个的下拉列表
- 如何使2下拉菜单依赖于另一个不使用值
- 依赖于jQuery的下拉列表
- 我怎样才能让两个不同的下拉菜单依赖于同一个父菜单