for循环更改jQuery中下拉菜单的值

时间:2015-05-11 13:58:01

标签: javascript jquery html

我目前有一个下拉菜单,列出了从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代码?

3 个答案:

答案 0 :(得分:3)

将您的代码移至ready并使用appendoption添加到选择中。

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