如何增加/减少'选择'用户想要选择一个选项后的选项宽度

How to increase/decrease 'select' option width after the user wants to select an option

本文关键字：选项 选择 何增加 一个 增加 减少 用户      更新时间：2023-09-26

我有一个选择框，我硬编码与宽度。我想根据所选文本的宽度。如果文本很长，那么宽度会自动扩展，如果文本很短，那么它会根据它进行调整。这是我的代码。

.post-select {
     border:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }
<select id="discoverselect" class="post-select">
        
        <option>All Sports</option>
        <option>OCR</option>
        <option>Triathlon</option>
        <option>Running and Marathon</option>
        <option>Ultramarathon</option>
        <option>Cycling</option>
</select>

如果你能找到长度，你可以根据你的字符改变宽度。

查找 

function textWidth(str){
    var span = $("<span>"+str+"</span>");
    $("body").append(span);
    var width = span.width();
    span.remove();
    return width;
    };


$(document).ready(function(){
	$("#discoverselect").change(function(){
    $(this).width(textWidth($(this).find("option:selected").text()));
    }).trigger("change");
    });
function textWidth(str){
	var span = $("<span>"+str+"</span>");
    $("body").append(span);
    var width = span.width();
    span.remove();
    return width;
    };
.post-select {
     border:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="discoverselect" class="post-select">        
        <option>All Sports</option>
        <option>OCR</option>
        <option>Triathlon</option>
        <option>Running and Marathon</option>
        <option>Ultramarathon</option>
        <option>Cycling</option>
</select>

Demo

$(document).ready(function()
{
    $("#discoverselect").change(function()
    {
        $(this).width(textWidth($(this).find("option:selected").text())+20);
    }).trigger("change");
});
function textWidth(str)
{
    var span = $("<span style='white-space: nowrap;'>"+str+"</span>");
    $("body").append(span);
    var width = span.width();
    span.remove();
    return width;
};
相关文章：