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

Question

I have the following dropdown:

    <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>

And I have a function that show and hides another div when the user chose between the options:

$('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();
      }
})

So, when the user choose Developer the div remains shown, and when they choose any other option this div hides. Everything works fine, but there's a thing, when the page loads this tag: <option selected>Choose an option</option> mantain the div shown, and that's not correct, when the page loads the div needs to be hidden too.

However I'm not pretty sure how to add that to the function, any thoughts?

Answer 1

If your issue is that you want this logic to run on page load, as well as on change, then you can simply trigger it.

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

trigger will cause the event handler to execute immediately.

Answer 2

You can simply add

style="display: none;"

into the tag which has the github_link id when you define it in the HTML. Showing it and hiding it will work.

It is more elegant though to define a CSS class like:

.invisible {
    display: none;
}

and use addClass / removeClass to hide/show the tag, since, as far as I know, show() and hide() are not the fastest features in 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

your script loads when your select being changed, so to make it works when the page loads, you need to have it outside any event

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

or to make it simpler, we can have it inside a function:

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