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

如何将函数应用于选项选项标记？

3 个答案: