使用 Select2 + Jquery 隐藏另一个 html 组件

Question

I am trying to hide a div (id #pagos) when a select input (id #buy_sell) option has been chosen (using select2).

使用 JQuery 和标准的 select 框非常容易，但我对使用 select2 有点陌生，一切都变得复杂了。

到目前为止，我还没有找到有效的脚本，这就是我来找你的原因。 这是我到目前为止的代码。 我将非常感谢任何更正以使其正常工作。

<script>
$("#buy_sell").change(function() {
  if ($("#buy_sell").select2("val") == "241|Vendo") {
    $('#pagos').show();
  } else {
    $('#pagos').hide();
  }
});
$("#buy_sell").trigger("change");
</script>

Answer 1

 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <div> <select id="buy_sell"> <option value="1">First option</option> <option value="2">Last option</option> </select> <div id="pagos">Will be hidden if "2" is selected</div> </div> <script> $('document').ready(function() { $('select').select2(); $('#buy_sell').on('change', function (e) { if (e.target.value === '2') { $('#pagos').hide(); } else { $('#pagos').show(); } }) }) </script>