如何在HTML/PHP的select下拉选项中实现分列对齐显示效果？

原生<option>标签默认不支持HTML结构渲染，仅靠空格拼接对齐会受字体宽度、空格合并规则影响，很容易出现排版错乱的问题，下面提供两种可落地的实现方案：

方案1：基于已引入的Select2组件实现（推荐） #

你现有代码已经配置了data-widget='select2'，直接用Select2的自定义模板功能可以实现精准的多列对齐，完全不受字体影响：

步骤1：改造PHP渲染逻辑，拆分字段到自定义属性 #

<select name='pks_bank' id='pks_bank' data-widget='select2' class='multisel' 
        style='width:65%; padding-bottom:5px;padding-top:5px;'>
<option value='no'>- Pilih PKS Bank - </option>
    <?php
    foreach ($list_pks_bank as $data) {
       $id_wok = $data->PKS1 . '/' . $data->PKS2 . '/' . $data->PKS3 . '/' . $data->PKS4;
       // 将三个字段分别存入自定义属性，不直接拼接为文本
       $nmbnk = ucwords(strtoupper($data->NMBNK));
       $nopks1 = ucwords(strtoupper($data->NOPKS1));
       $nopks2 = ucwords(strtoupper($data->NOPKS2));
       echo "<option value='{$data->PKS2}' data-nmbnk='{$nmbnk}' data-nopks1='{$nopks1}' data-nopks2='{$nopks2}'>{$nmbnk} - {$nopks1} - {$nopks2}</option>";
       }
    ?>
 </select>

步骤2：添加CSS控制列宽 #

/* 自定义Select2选项的列样式 */
.select2-results__option .select2-col {
  display: inline-block;
}
/* 可根据实际内容长度调整每列宽度 */
.select2-col-nmbnk {
  width: 180px;
}
.select2-col-nopks1 {
  width: 150px;
}

步骤3：配置Select2自定义渲染模板 #

$('#pks_bank').select2({
  // 下拉列表选项自定义渲染
  templateResult: function(option) {
    if (!option.id) return option.text; // 兼容默认提示选项
    return $('<span>')
      .append($('<span class="select2-col select2-col-nmbnk">').text($(option.element).data('nmbnk')))
      .append($('<span class="select2-col select2-col-nopks1">').text($(option.element).data('nopks1')))
      .append($('<span class="select2-col">').text($(option.element).data('nopks2')));
  },
  // 选中后展示的文本保持原有格式，可按需调整
  templateSelection: function(option) {
    return option.text;
  }
});

方案2：原生select等宽字体对齐（无依赖场景） #

如果不需要用Select2，可以通过等宽字体+PHP侧统一补空格的方式实现对齐：

<select name='pks_bank' id='pks_bank' class='multisel' 
        style='width:65%; padding-bottom:5px;padding-top:5px; font-family: Consolas, "Courier New", monospace;'>
<option value='no'>- Pilih PKS Bank - </option>
    <?php
    // 定义每列固定长度，可根据实际最长内容调整
    $nmbnk_length = 25;
    $nopks1_length = 20;
    foreach ($list_pks_bank as $data) {
       $id_wok = $data->PKS1 . '/' . $data->PKS2 . '/' . $data->PKS3 . '/' . $data->PKS4;
       // 每列补空格到固定长度，替换为&nbsp;避免被浏览器合并
       $nmbnk = str_pad(ucwords(strtoupper($data->NMBNK)), $nmbnk_length, ' ', STR_PAD_RIGHT);
       $nopks1 = str_pad(ucwords(strtoupper($data->NOPKS1)), $nopks1_length, ' ', STR_PAD_RIGHT);
       $nopks2 = ucwords(strtoupper($data->NOPKS2));
       $wok = str_replace(' ', '&nbsp;', "{$nmbnk} - {$nopks1} - {$nopks2}");
       echo "<option value='" . $data->PKS2 . "'>" . $wok . "</option>";
       }
    ?>
 </select>

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