结合更改和onload事件 [英] Combine change and onload events

问题描述

我已经编码了这个，我从表单中选择时添加/删除类。
但是，如果我选择默认选择第二个选择，例如

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.

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

然后它不会将类更改为 has-warning 。它只有在我选择另一个然后再改变时才会改变..

then it doesn't change the class to has-warning. It changes only when I select the other and then this..

如何添加此功能？我试过这个 $（'#destina'）。onload（function（）{但是没有这样的事件......

How can I add this feature? I tried this $('#destination').onload(function() { but there isn't such an event...

$('#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>

推荐答案

您在页面加载时执行此操作。如果您控制脚本标记的位置，您只需在脚本中立即运行的代码中执行此操作。如果您不控制 script 标记的位置，请将其放在 ready 处理程序中。

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.

这是第一个选项：

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

到

// Initial setup:
$(setDestinationWarningFlags);

...这是 ready ：

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

这篇关于结合更改和onload事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！