php - 基于先前选择的下拉选择

Question

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

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

而“City1”在
“7 月 22 日”和“7 月 25 日”

“7 月 22 日”有 2 场 “下午 2 点”和“下午 5 点”

我怎样才能开始使用这样的表格？请给我一个例子。

谢谢大家

Answer 1

Not going to do it for you, but I can give you a few hints. First, your select needs an onchange function, and they each need unique ids. e.g.

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

Next, your onchange function needs to detect the current element, and update the other boxes. I'd suggest storing the data as a multidimensional array. So the update will be something like this:

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

And, of course, you'll need the array of data, but you can figure the rest out yourself. That help?

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');