javascript - 如何将功能应用于选项选择的标签？

Question

我有以下下拉列表:

    <select id="role" name="role" class="form-control">
      <option selected>Choose an option</option>
      {% for index, value in roles_form.fields.roles.choices %}
          <option value="{{ index }}">{{ value }}</option>
      {% endfor %}
    </select>

我有一个功能，当用户在选项之间进行选择时显示和隐藏另一个 div:

$('select').on('change', function() {
      var developer = {{ developer_id }};
      var value = $(this).val();
      console.log(developer);

      if (value == developer) {
        $('#github_link').show();
      } else {
        $('#github_link').hide();
      }
})

所以，当用户选择Developer div 仍然显示，当他们选择任何其他选项时，这个 div 隐藏。一切正常，但有一点，当页面加载此标记时:<option selected>Choose an option</option>维护显示的 div，这是不正确的，当页面加载时，div 也需要隐藏。

但是我不太确定如何将其添加到函数中，有什么想法吗？

Answer 1

如果您的问题是您希望此逻辑在页面加载和更改时运行，那么您可以简单地触发它。

$(...).on('change', ...).trigger('change');

trigger 将导致事件处理程序立即执行。