我目前有一个下拉菜单,列出了从1970年到现在的所有年份。目前,这是在HTML中的一些嵌入式JavaScript中。我正在尝试使用外部文件来执行与jQuery相同的功能,但我遇到了困难。
这是显示下拉菜单的当前方法:
<h4 class="form_title">Time Span</h4></br>
<label for="select" class="col-lg-2 control-label">From:</label>
<div class="col-lg-3">
<select class="form-control" name="timeStart" id="select">
<option value="" selected disabled>Select</option>
<script type="text/javascript">
// get current year and then use loop to populate options
var year = new Date().getFullYear();
for(i = year; i >= 1970; i--) {
document.write('<option value="' + i + '">' + i + '</option>');
};
</script>
</select>
</div> <!-- col-lg-3 -->
这很好但我想将逻辑与视图分开。我试图从这个文件中完全删除脚本,然后在我的JavaScript文件中添加以下内容,如下所示:
var year = new Date().getFullYear();
$("#select").change(function() {
console.log("Calling function successfully...");
for(i = year; i >= 1970; i--) {
document.write('<option value="' + i + '">' + i + '</option>');
}
});
我把console.log
放在那里,看看当我选择菜单时它是否被调用(它不是)。我一直在尝试这方面的许多变化,但无法弄清楚我做错了什么(可能是几件事)。我应该选择select
代码还是option
代码?
答案 0 :(得分:3)
将您的代码移至ready
并使用append
将option
添加到选择中。
var year = new Date().getFullYear();
$(document).ready(function () {
console.log("Calling function successfully...");
var options = '';
for (i = year; i >= 1970; i--) {
options += '<option value="' + i + '">' + i + '</option>';
}
$('#select').append(options);
});
答案 1 :(得分:1)
由于您使用的是JQuery,因此您需要确保将代码包装在$(document).ready(function() {});
如果你不这样做,它只会尝试在加载时立即运行。将其包装在其中将确保在尝试运行代码之前呈现选择框。
你可以在这里看到一个如何运作的例子。
http://jsbin.com/rebahiwupi/1/edit
$(document).ready(function() {
var sel = $('select');
var start_year = 1970;
for(var i=start_year;i<=new Date().getFullYear();i++) {
sel.append('<option value="'+i+'">'+i+'</option>');
}
});
答案 2 :(得分:1)
另一个使用while
循环的版本。
var year = new Date().getFullYear(), $options = $();
while (year >= 1970) {
var option = year--;
$options = $options.add($('<option/>', { 'value': option, 'text': option }));
}
$('#select').append($options);