Ich habe dies codiert, wo ich Klassen hinzufüge / lösche, wenn Sie aus dem Formular auswählen. Wenn ich jedoch als Standard wähle, wähle ich die 2. Auswahl, z. B.

<option value="7" selected>destination2</option>

dann ändert sich die Klasse nicht zuhas-warning. Es ändert sich erst wenn ich das andere auswähle und dann dieses ..

Wie kann ich diese Funktion hinzufügen? Ich habe es versucht$('#destination').onload(function() { aber es gibt kein solches Ereignis ...

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

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