javascript - 如何在引导选择选择器中为选项(下拉菜单)设置固定宽度

Question

这是代码

  <select class="selectpicker form-control" data-live-search="true" id="subject_teacher_drop_down">
       <option>English</option>
       <option>Methodology of social science with special reference to economics</option>
  </select>

我想让下拉菜单的宽度例如 100 px 。现在宽度等于最大选项的大小。

Answer 1

Guyz，我想出了一个简单的答案。我们可以在选择选项中使用'datacontent'属性来显示选择选项的值，从而改变它的宽度:)
代码是:

 <select class="selectpicker form-control" data-live-search="true" id="subject_teacher_drop_down">
   <option data-content="English">English</option>
   <option data-content="Methodology of social...">Methodology of social science with special reference to economics</option>
</select>

如果您要动态传递值，请执行以下操作:

  <select class="selectpicker form-control" data-live-search="true">
          <?php foreach ($subjectList as $subjects) : ?>
             <option data-content=" <?php $a =$subjects->getName();$b = substr($a, 0, 35);$y = $b . "...";if($a > $b)echo $y; else echo $a;?>" id="<?php echo $subjects->getId(); ?>" name="<?php echo $subjects->getName(); ?>" value="<?php echo $subjects->getName(); ?>">
                <?php echo $subjects->getName(); ?>
            </option>
       <?php endforeach; ?>
  </select>