Question

我正在运行一个活动，它在几个城市，不同的日期和不同的时间..我希望选项显示基于之前的选择，但在我选择之前它是空的！

我有3个城市＆＃34; City1 ＆＃34; ＆＃34;的城2 ＆＃34; ＆＃34;的请分享帮助＆＃34;

＆＃34; City1 ＆＃34;是的＆＃34; 7月22日＆＃34; ＆安培; ＆＃34; 7月25日＆＃34;

＆＃34; 7月22日＆＃34;有2个会议＆＃34; 2pm ＆＃34; ＆安培; ＆＃34;的 17:00 ＆＃34;

看看它的演示没关系，但是当我在localhost上试用它时它会变空！

<select id="menu1" class="menu"></select>
<select id="menu2" class="menu"></select>

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

Fiddle

Answer 1

复制并粘贴整个代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
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');

});//]]>  

</script>
</head>
<body>
  <select id="menu1" class="menu"></select>
  <select id="menu2" class="menu"></select>
</body>
</html>

如果您的代码工作正常，则上述代码应该有效。

根据上一个选择删除选择但是为空

1 个答案: