一旦页面加载,就以编程方式触发jquery下拉列表更改事件

时间:2015-10-09 00:08:54

标签: javascript jquery html

enter image description here

我有2个下拉列表,如果它们都被更改,它将触发事件。 (意思是,对索引的任何更改都将触发基于下拉列表当前值的json请求并将它们附加到我的表中。)

我的问题是,一旦页面加载,是否有任何方法可以预先选择其索引并同时触发事件?我打算根据当前学期和学年来设置它们。

这是我的jquery代码:

NA

2 个答案:

答案 0 :(得分:2)

在设置值

时可以触发其中一个更改
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var term = Math.ceil(month/4);// needs verification on how term is set

$schoolyear
    .change(getCL)
    .val(year);//set year value

$schoolterm
    .change(getCL)
      // trigger change after setting value, will call getCL()
    .val(term).change();

答案 1 :(得分:1)

尝试在脚本底部添加getCL()

$schoolyear = $('select#schoolyear');
$schoolterm = $('select#schoolterm')
$tbl = $('#classview');

$schoolyear.change(function () {
getCL();
});

$schoolterm.change(function () {
getCL();
});

function getCL() {
            $.getJSON('@Url.Action("getClassList","Enrollment")', { term: $schoolterm.val(), year: $schoolyear.val() }, function (e) {

                $tbl.find('tbody').remove();

                if (e.length > 0) {

                    $(e).each(function (index, e) {
                        $tbl.append('<tr><td>' + e.subj + '</td><td>' + e.days + '</td><td>' + e.cstart + '</td><td>' + e.cend + '</td><td>' + e.professor + '</td><td>' + e.units + '</td><td>' + e.status +
                        '</td>' + '<td>' + '<form action="/Enrollment/dropClass" method="post">' + '<input type="hidden" name="test"  value="'+e.id+'"/>' +
                        '<a href="#"> Delete </a>' + '</form></td></tr>')

                    });
                }
                else {
                    $tbl.append('<tr><td colspan="8">No match found</td></tr>');
                }
                //compute t
            });
  }

getCL();  //this will run once when page is loaded.

要回答您的其他问题,您可以在下拉列表中添加selected,在下拉列表中设置默认的预选选项。例如:

<select>
  <option value="2012">2012</option>
  <option value="2013" selected>2013</option>
  <option value="2014">2014</option>
  <option value="2015">2015</option>
</select>