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

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将导致事件处理程序立即执行。

Answer 2

你可以简单地添加

style="display: none;"

在HTML中定义它时，在具有github_link id的标记中。 显示它并隐藏它将起作用。

虽然定义一个CSS class更为优雅：

.invisible {
    display: none;
}

并使用addClass / removeClass隐藏/显示标记，因为据我所知， show()和hide()不是jQuery中最快的功能：

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

      $("#github_link")[((value == developer) ? "remove" : "add") + "Class"]("invisible");
})

Answer 3

当您的选择被更改时，您的脚本会加载，因此要在页面加载时使其工作，您需要将其置于任何事件之外

var developer = {{ developer_id }};

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

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

// Outside any events as well

var value = $('select').val();

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

或者为了使它更简单，我们可以将它放在一个函数中：

var developer = {{ developer_id }};

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

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

    fName(value)
});
fName($('select').val());