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

【问题标题】：Hiding another html component with Select2 + Jquery使用 Select2 + Jquery 隐藏另一个 html 组件
【发布时间】：2021-05-31 01:22:23
【问题描述】：

我正在尝试在选择选择输入（ID #Buy_sell）选项（使用Select2）时隐藏DIV（ID #PagoS）。

使用 JQuery 和标准选择框很容易，但我对使用 select2 有点陌生，一切都变得复杂了。

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

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

【问题讨论】：

标签： javascript jquery jquery-select2

【解决方案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>

【讨论】：