根據先前的選擇下拉選擇

Question

我有一個小問題。 我正在幾個城市，不同的日期和不同的時間舉辦一項活動及其活動。 我正在jQuery / PHP / HTML中創建注冊表單。 我希望根據之前的選擇顯示選項。

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

並且“ City1”打開
“ 7月22日”和“ 7月25日”

而在“ 7月22日”有2節“下午2點”和“下午5點”

我如何開始使用這樣的表格？ 請給我一個例子。

謝謝大家

Answer 1

不會為您這樣做，但是我可以給您一些提示。 首先，您的選擇需要一個onchange函數，並且每個函數都需要唯一的ID。 例如

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