在页面加载时无法读取null的属性

Question

我有以下javascript：

$(document).ready (function () {
  var select = document.getElementById('party_size');
  select.selectedIndex = select.options.length-1;
});

这是从.erb呈现的html。选项字段的数量是动态的。

<div class="col-sm-9 col-sm-offset-1">
  There will be
  <select onchange="partySize.call(this, event)" name="reservation[party_size]" id="party_size">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
  people in my party.
</div>

在页面加载时，Google Chrome会返回Uncaught TypeError: Cannot read property 'options' of null，并且选择不会选择最后一个选项，这就是javascript的目的。

在刷新时，错误不会触发，因为javascript正常工作（选择字段正确选择最后一个选项）。在上面的示例中，选择了值为3的选项。

我需要使用javascript更改哪些内容才能在页面加载时正常启动？