Javascript 如何在引导选择器选择器中设置选项（下拉）的固定宽度

这是密码

  <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像素。现在宽度等于最大选项的大小。

您可以添加

select,option
{
   width : 150px(just give the width PX which it for screen size);
}

---

伙计，我想出了一个简单的答案。我们可以使用选择选项中的“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>

在标记中使用css样式和/或类似乎无法做到这一点，但如果您对javascript开放——在下面的示例中是jQuery——那么您可以钩住选择器的
show.bs。选择
事件并修改小部件，如下所示：

$('.selectpicker').on('show.bs.select', function () {
var $dropdownMenu = $(this).nextAll('div.dropdown-menu').first();
if ($dropdownMenu.length > 0) {
    $dropdownMenu.css('min-width', '').css('max-width', '100%');
    var $inner = $dropdownMenu.find('div.inner');
    if ($inner.length > 0) {
        $inner.css('overflow-x', 'hidden');
    }
}

}))

在这里，我访问它使用的下拉菜单的div，删除它为
min width
分配的任何内容，然后将
max width
设置为100%，然后删除如果选项太宽可能显示的水平滚动条，我将下拉菜单的“内部”div
overflow-x
设置为
隐藏

结果是一个下拉菜单，该菜单被限制为按钮的宽度，该按钮显示的任何选项的文本过宽都会被截断

这方面的工作比我想做的要多，但默认行为使下拉菜单在小屏幕显示上不可用…
您必须查看渲染的标记（例如通过开发人员工具），然后在元素上应用您的样式（
width:100px；
）。欢迎使用堆栈溢出，您的问题似乎是重复的。看一看@ThumChoonTat将宽度应用于
将不起作用。@Ivan OP的可能副本是使用第三方库来呈现选择字段，并且输出将不会是
select
和
选项
，因此我认为可能没有简单的答案：（或者……正如我在发布本文后立即发现的，只需将以下内容添加到site.css文件：
。引导选择。下拉菜单{max width:100%！important；}