所选内容的tailwindcss下拉宽度

Question

我正在使用tailwindcss。

如何根据所选内容制作下拉菜单宽度。

        <div class="flex-none w-[120px] h-[55px]">
          <select class="h-[45px] w-full">
            <option selected="selected" value="1">All Departments</option>
            <option value="1">Volvo Volvo Volvo Volvo </option>
            <option value="2">Saab Saab Saab</option>
            <option value="3">Opel Opel </option>
            <option value="4">Audi</option>
          </select>
        </div>

Answer 1

需要用js修改宽度。 我没有看到任何其他选择。 这真的很好用：

 $(document).ready(function() { $('#resizingSelectTag').change(function(){ $("#widthTempOption").html($('#resizingSelectTag option:selected').text()); $(this).width($("#selectTagWidth").width()); }); });

 #resizingSelectTag { width: 50px; } #selectTagWidth{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="resizingSelectTag"> <option>All</option> <option>Lorem Ipsum</option> <option>Lorem Ipsum is not simply random text.</option> </select> <select id="selectTagWidth"> <option id="widthTempOption"></option> </select>

来自这里的原始帖子： https://www.oodlestechnologies.com/blogs/auto-resize-select-tag-element-width-according-to-option/