Question

我有一个小问题。我正在几个城市，不同日期和不同时间举办活动。我正在用jQuery / PHP / HTML创建一个注册表单。我希望根据之前的选择显示选项。

我有3个城市 “City1”“City2”“City3”

并且“City1”正在上 “7月22日”＆amp; “7月25日”

在“7月22日”，有2个会议 “下午2点”＆amp; “下午5点”

如何开始使用这样的表单？请举个例子。

谢谢大家伙

Answer 1

不打算为你做，但我可以给你一些提示。首先，你的select需要一个onchange函数，它们每个都需要唯一的id。 e.g。

<select onchange='update' id='box1'>

接下来，你的onchange函数需要检测当前元素，并更新其他框。我建议将数据存储为多维数组。所以更新将是这样的：

var id = this.options[this.selectedIndex].value;
var b2 = document.getElementById('box2');
while(b2.options.length > 0)b2.remove(0);//remove all options currently present
for(var i in boxoptions[id])b2.options[b2.options.length]=new Option(boxoptions[id]['name'], boxoptions[id]['value']);//add new options

当然，你需要一系列数据，但你可以自己解决剩下的问题。那有帮助吗？

Answer 2

演示：http://jsfiddle.net/eJn8g/

// data
var data = {
    "New York": ["July 20", "July 21"],
    "Miami": ["July 22", "July 23"],
    "San Francisco": ["July 24", "July 25"],
}

// populate menu1
for (var i in data) {
    $('#menu1').append('<option>' + i + '</option>');
}

// populate menu2 based on menu1's value
$('#menu1').change(function() {
    var key = $(this).val();
    $('#menu2').empty();
    for (var i in data[key]) {
        $('#menu2').append('<option>' + data[key][i] + '</option>');
    }
}).trigger('change');

根据上一个选择下拉选择

2 个答案: