Combine change and onload events

Question

I have coded this where I add / delete classes when you select from the form. However if i choose as default select the 2nd select e.g.

Answer 1

You do it on page load. If you control where your script tags go, you just do it in immediately-run code in your script. If you don't control where script tags go, put it in a ready handler.

Here's that first option:

function setDestinationWarningFlags() {
  var dest = $('#destination').find(":selected").text();

  if (dest === 'destination1') {
    console.log('here1');
    $('#destin').removeClass("has-warning");
    $('#destin').addClass("has-success");
  } else if (dest === 'destination2') {
    console.log('here2');
    $('#destin').removeClass("has-success");
    $('#destin').addClass("has-warning");
  }
}
// Do it on change:
$('#destination').change(setDestinationWarningFlags);
// Initial setup:
setDestinationWarningFlags();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="destin" class="form-group has-success">
  <label for="inputName" class="col-md-2 col-sm-2 control-label">Destination:</label>
  <div class="col-md-3 col-sm-3">
    <select id="destination" name="destination" class="form-control" required>
      <option value="1">destination1</option>
      <option value="7" selected>destination2</option>
    </select>
  </div>
</div>

If you have to use a ready callback instead, just change the last bit from:

// Initial setup:
setDestinationWarningFlags();

to

// Initial setup:
$(setDestinationWarningFlags);

...which is a shortcut for ready:

function setDestinationWarningFlags() {
  var dest = $('#destination').find(":selected").text();

  if (dest === 'destination1') {
    console.log('here1');
    $('#destin').removeClass("has-warning");
    $('#destin').addClass("has-success");

  } else if (dest === 'destination2') {
    console.log('here2');
    $('#destin').removeClass("has-success");
    $('#destin').addClass("has-warning");
  }
}
// Do it on change:
$('#destination').change(setDestinationWarningFlags);
// Initial setup:
$(setDestinationWarningFlags);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="destin" class="form-group has-success">
  <label for="inputName" class="col-md-2 col-sm-2 control-label">Destination:</label>
  <div class="col-md-3 col-sm-3">
    <select id="destination" name="destination" class="form-control" required>
      <option value="1">destination1</option>
      <option value="7" selected>destination2</option>
    </select>
  </div>
</div>

Answer 2

You can export logic to a function and call this function on both change and document.ready event.

Also, if you have to add/remove classes, try to use .toggleClass

Sample

$('#destination').change(function() {
  updateUIState();
});

$(document).ready(function() {
  updateUIState();
})

function updateUIState() {
  var dest = $('#destination').find(":selected").text();
  var isDest2 = dest === 'destination2';
  $('#destin').toggleClass("has-warning", isDest2);
  $('#destin').toggleClass("has-success", isDest2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="destin" class="form-group has-success">
  <label for="inputName" class="col-md-2 col-sm-2 control-label">Destination:</label>
  <div class="col-md-3 col-sm-3">
    <select id="destination" name="destination" class="form-control" required>
      <option value="1">destination1</option>
      <option value="7" selected>destination2</option>
    </select>
  </div>
</div>

Answer 3

You can use triggerHandler() for an initial trigger, just append it to your chain:

$('#destination').change(function() {
   var dest = $('#destination').find(":selected").text();

   if (dest === 'destination1') {
       console.log('here1');
       $('#destin').removeClass("has-warning");
       $('#destin').addClass("has-success");

   } else if (dest === 'destination2') {
       console.log('here2');
       $('#destin').removeClass("has-success");
       $('#destin').addClass("has-warning");
   }
 }).triggerHandler("change");

Answer 4

Try

$(document).ready(function() {
  $("#destination").trigger("change");
});

In order for your on change event handler to run when the page loads.