javascript - 如何在 HTML 的 Select Option 中对齐两个单词

Question

正如您在图像中看到的，如何为 Select 标签中的每个 Option 标签设置不同的间距并正确对齐它们。这些值正在从数据库中动态检索，因此我无法估计姓名和帐号之间的差距以使用此  这是包含在 for 循环中以获取值的选项的代码:

<option value=<%= cus.getId()%>,<%= cus.getName()%>,<%= cus.getEmail()%>,<%= cus.getBalance()%> >
    Name = <%= cus.getName()%> Account Number = <%= cus.getId()%>
</option>

Answer 1

您可以尝试使用 javascript 来实现您想要的。此外，您必须为选择标签使用任何等宽字体以保持对齐正确。
下面是一个例子:

select,
option {
  font-family: monospace;
}

<script>
  const maxLength = 15;

  function processInfo(name, accountNumber) {
    var output = "Name = " + name;

    for (var i = 0; i < maxLength - name.length; i++) {
      output += "&nbsp;";
    }
    output += "Account Number = ";
    output += accountNumber;

    return output;
  }
</script>

<select>
  <option>
    <script>
      document.write(processInfo("Mahesh", "10000052"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Pawan", "10000053"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Tarak", "10000054"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Arjun", "10000055"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Anjali", "10000056"));
    </script>
  </option>
  <option>
    <script>
      document.write(processInfo("Keerthy", "10000057"));
    </script>
  </option>
</select>

上面的例子是不言自明的。最初设置最大固定长度大小。然后，找出提供的名称的实际长度，并在名称后动态添加所需数量的空格字符(   )，可以通过从最大长度中减去输入名称的实际长度来找到。