Question

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

＆＃13;

.post-select {
     border:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }

＆＃13;

<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>

＆＃13;

Answer 1

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

查找长度

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

＆＃13;

$(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;
    };

＆＃13;

.post-select {
     border:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }

＆＃13;

<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>

＆＃13;

Answer 2

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;
};

如何增加/减少选择＆＃39;用户想要选择选项后的选项宽度

2 个答案: