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代码包含任何子代，您可以只使用假空格（&nbsp）或将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>

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

  在4个字符代码之前
0空格

3个字符代码前的1个空格

2个字符前的2个空格代码

1个字符代码前的3个空格
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;"。

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

1 个答案: