php - 如何在选择选项下拉列表中将 Fix 宽度保持在两个或多个 li 之间？

Question

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select" >
    <option value=""  style="bold"> </option>
    <option value=""  style="bold">Code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name </option>
    <?php
            include "config.php";
            echo $sup_code="select * from supplier where status='active' order BY su_code ASC";
            $sel_sup_code = mysql_query($sup_code) or die(mysql_error());
            while($row_sup_code=mysql_fetch_array($sel_sup_code))
            {
            ?>
               <option value="supplier.php?selectedid=<?php echo $row_sup_code['id']; ?>" >
               <li>&nbsp;&nbsp; <?php echo $row_sup_code['su_code']; ?> </li>&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;<li> <?php echo $row_sup_code['su_name'] ?> </li> 
               </option>
            <?php
            }
           ?>
</select>

Answer 1

option 标签不允许有任何子标签，您可以使用假空格 ( ) 或替换 select使用 div 然后通过 javascript 提交数据。

---

空格示例:

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select">
  <option value=""> </option>
  <option value="" style="font-weight: bold">Code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name</option>
  <option value="123">&nbsp;&nbsp; 123 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="345">&nbsp;&nbsp; 345 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="6789">&nbsp;&nbsp; 6789 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="10">&nbsp;&nbsp; 10 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
</select>

如您所见，不同长度的代码会导致不一致，因此您必须根据长度修改空格数，例如:

0 space before 4 characters code

1 space before 3 characters code

2 spaces before 2 characters code

3 spaces before 1 character code

Code - Name
   1 - 1 character
  22 - 2 characters
 333 - 3 characters
4444 - 4 characters

结果将如下所示:

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select" style="font-family:monospace;">
  <option value=""> </option>
  <option value="" style="font-weight: bold">Code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name</option>
  <option value="123">&nbsp;123 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="345">&nbsp;345 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="6789">6789 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="10">&nbsp;&nbsp;10 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
</select>

请注意，为确保精确间距，请使用等宽字体进行选择(我添加了style="font-family:monospace;"。

总而言之，让您的 PHP 代码检查产品代码的长度，然后基于此添加动态空间，例如:( if length = 4, space = 0 ) 等...

P.S: style="bold" 应该是 style="font-weight: bold;"。