Question

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这是第一个选项：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您必须使用就绪回调，只需更改最后一位：

// Initial setup:
setDestinationWarningFlags();

到

// Initial setup:
$(setDestinationWarningFlags);

...这是ready的快捷方式：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将逻辑导出到函数，并在change和document.ready事件上调用此函数。

此外，如果您必须add/remove个班级，请尝试使用.toggleClass

示例

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

尝试

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

为了让您的on change事件处理程序在页面加载时运行。

Answer 4

您可以使用triggerHandler()作为初始触发器，只需将其附加到您的链中：

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

结合更改和onload事件

4 个答案:

示例