带条件显示的HTML Select下拉框添加搜索功能，Select2实现失败求助

实现方案 #

核心问题说明 #

你之前用Select2不生效主要是两个常见原因：

1. Select2初始化后会隐藏原生<select>元素，生成独立的自定义DOM结构，你直接控制原生select的显隐不会生效
2. 没有提前初始化Select2，等到要显示的时候才操作会导致渲染异常

调整步骤 #

1. 前置准备

确保你已经在项目中引入了jQuery（和你现有代码依赖一致）以及Select2对应的CSS、JS资源。

2. 初始化Select2

页面加载完成后先完成Select2的初始化，同时默认隐藏生成的下拉框容器：

$(document).ready(function () {
  // 可给所有原因下拉框加统一类名比如.reason-select，适配你动态生成多行的场景
  $('#reason1').select2({
    placeholder: "请搜索/选择原因",
    allowClear: true,
    width: "220px" // 可根据需求调整宽度，也可设置为100%适配父容器
  });
  // 初始隐藏Select2生成的容器
  $('#reason1').next('.select2-container').hide();
});

3. 修改原有显隐逻辑

调整focusout事件的代码，改为控制Select2生成的容器的显隐，同时补充数值校验避免计算异常：

$('#prods1').on('focusout', function () {
  // 数值校验，避免输入非数字、分母为0导致计算出NaN
  const prodsVal = parseFloat($('#prods1').val()) || 0;
  const trgtVal = parseFloat($('#trgt').val()) || 0;
  const rate = trgtVal === 0 ? 0 : (prodsVal / trgtVal) * 100;
  const select2Wrap = $('#reason1').next('.select2-container');

  if (rate < 70) {
    select2Wrap.show();
  } else {
    select2Wrap.hide();
    // 隐藏时清空已选项，可按需保留或删除
    $('#reason1').val(null).trigger('change');
  }
});

动态行适配说明 #

如果你页面是多行生成的（下拉ID带行号后缀如reason1、reason2），可以给所有原因下拉框加统一类名reason-select，初始化时批量绑定：

$('.reason-select').each(function () {
  $(this).select2({
    placeholder: "请搜索/选择原因",
    allowClear: true,
    width: "220px"
  }).next('.select2-container').hide();
})

显隐逻辑里也通过当前行的DOM上下文查找对应下拉框即可。

内容的提问来源于stack exchange，提问作者Tayyab Hussain