Jquery select 被选择而不是添加类

Question

我正在学习Jquery。我试图理解所选的选项。 所以当用户选择一个选项时我可以做一些事情。

我尝试运行 Jquery，以便当用户选择 customAmountSelected 时，它应该向 customAmountinput 添加一个类“xxx”

$(document).ready(function() {
  if ($("#amountSelected:selected").val() == 'customAmountSelected') {
    $('.customAmountinput').addClass('xxx');
  }
});

.displaynone {
  display: none;
}

<div>
  <div class="form-group">
    <label>Budget (&pound;)</label>
    <select class="form-control" id="amountSelected">
      <option selected="selected">No budget</option>
      <option value="5">£5</option>
      <option value="30">£10</option>
      <option value="20">£20</option>
      <option value="50">£50</option>
      <option value="100">£100</option>
      <option value="customAmountSelected">Custom</option>
    </select>
    <p class="small"><em>Need some text here to explain why they can edit budget </em>
    </p>
  </div>
  <!-- appear when user selected custom budget -->
  <div class="form-group displaynone customAmountinput">
    <label>Enter ammount</label>
    <input class="form-control" placeholder="&pound;">
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" value checked>Post to wall?
      </label>
    </div>
  </div>
</div>

Answer 1

您正在处理值，因此不需要验证“选定”状态。

你必须监听“change”事件，并且它必须在$(document).ready()内部，这种事件绑定(bind)在window/DOM加载中。

尝试这样的事情:

$(document).ready(function() {
  $("#amountSelected").change(function(){	
     if($(this).val() == 'customAmountSelected'){
       $('.customAmountinput').addClass('xxx');
     }
  });
});