也许这是一个简单的问题，也许不是。我有一个选择框，我用宽度硬编码。说120px。
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>我希望能够显示第二个选项，以便用户可以看到文本的全长。
像其他一切一样。这在Firefox中运行良好，但不适用于Internet Explorer 6。
如果你有一个预先存在的选项 - 使用<select>，并且你不想以编程方式更改宽度，那么除非你有点创意，否则你可能会失败。
title属性设置为每个选项。这是非标准的HTML（如果你在这里关心这个小的违规行为），但IE（和Firefox也会）在鼠标悬停时用鼠标弹出显示整个文本。如果您稍后通过JavaScript添加长选项，请查看：How to update HTML “select” box dynamically in IE
我改进了cychan的解决方案，就像那样：
<html>
<head>
<style>
.wrapper{
display: inline;
float: left;
width: 180px;
overflow: hidden;
}
.selectArrow{
display: inline;
float: left;
width: 17px;
height: 20px;
border:1px solid #7f9db9;
border-left: none;
background: url('selectArrow.png') no-repeat 1px 1px;
}
.selectArrow-mousedown{background: url('selectArrow-mousedown.png') no-repeat 1px 1px;}
.selectArrow-mouseover{background: url('selectArrow-mouseover.png') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#w1').wrap("<div class='wrapper'></div>");
$('.wrapper').after("<div class='selectArrow'/>");
$('.wrapper').find('select').mousedown(function(){
$(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
}).
mouseup(function(){
$(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
}).
hover(function(){
$(this).parent().next().addClass('selectArrow-mouseover');
}, function(){
$(this).parent().next().removeClass('selectArrow-mouseover');
});
$('.selectArrow').click(function(){
$(this).prev().find('select').focus();
});
$('.selectArrow').mousedown(function(){
$(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
}).
mouseup(function(){
$(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
}).
hover(function(){
$(this).addClass('selectArrow-mouseover');
}, function(){
$(this).removeClass('selectArrow-mouseover');
});
});
</script>
</head>
<body>
<select id="w1">
<option value="0">AnyAnyAnyAnyAnyAnyAny</option>
<option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
</select>
</body>
</html>
The PNGs used in css classes are uploaded here...
你仍然需要JQuery .....
你可以尝试使用css解决。通过添加类来选择
select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}
我用以下代码修复了我的问题：
<div style="width: 180px; overflow: hidden;">
<select style="width: auto;" name="abc" id="10">
<option value="-1">AAAAAAAAAAA</option>
<option value="123">123</option>
</select>
</div>希望能帮助到你！
干杯，Cychan
这模仿了您寻找的大部分行为：
<!--
I found this works fairly well.
-->
<!-- On page load, be sure that something else has focus. -->
<body onload="document.getElementById('name').focus();">
<input id=name type=text>
<!-- This div is for demonstration only. The parent container may be anything -->
<div style="height:50; width:100px; border:1px solid red;">
<!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
<select
style="width:96px; position:absolute; z-index:+1;"
onactivate="this.style.width='auto';"
onchange="this.blur();"
onblur="this.style.width='96px';">
<!-- "activate" happens before all else and "width='auto'" expands per content -->
<!-- Both making a selection and moving to another control should return static width -->
<option>abc</option>
<option>abcdefghij</option>
<option>abcdefghijklmnop</option>
<option>abcdefghijklmnopqrstuvwxyz</option>
</select>
</div>
</body>
</html>
这将覆盖一些按键行为。
把它放在div中并给它一个id
<div id=myForm>
然后创建一个非常简单的css来配合它。
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }
这就是你所需要的。
我通过将min-width和max-width设置为select中的相同值然后将select：focus设置为auto来将其固定在我的引导页面中。
select {
min-width: 120px;
max-width: 120px;
}
select:focus {
width: auto;
}<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>很老的问题，但这是解决方案。这里有一个使用jquery的工作片段。它使用临时辅助select，其中复制了主选择中的所选选项，以便可以评估主要select应具有的真实宽度。
$('select').change(function(){
var text = $(this).find('option:selected').text()
var $aux = $('<select/>').append($('<option/>').text(text))
$(this).after($aux)
$(this).width($aux.width())
$aux.remove()
}).change()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option>ABC</option>
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
</select>我在IE中使用现有网站的一个简单的解决方案（使用jQuery，但如果你真的不太了解JS，我可以用eventListener代码发回）如下：
if (jQuery.browser.msie) {
jQuery('#mySelect').focus(function() {
jQuery(this).width('auto');
}).bind('blur change', function() {
jQuery(this).width('100%');
});
};
当然，使用变量（var cWidth = jQuery('#mySelect').width();）来存储前一个宽度，但这正是我们按照您的预期工作所需的全部内容。
样品
function PopulateDropdown() {
$.ajax({
type: "POST",
url: "../CommonWebService.asmx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("select[id^='MyDropDown']").empty();
$.each(msg.d, function () {
$("select[id^='MyDropDownSelect']").append($("<option></option>").val(this['IdIndexDataType']).html(this['DataTypeName']));
});
$("select[id^='MyDropDown']").css("width", "auto");
},
error: function (e1) {
alert("Error - " + e1.toString());
}
});
}
下面的代码将通过在将数据插入下拉列表后添加此代码来解决下拉列表宽度问题。
$("select[id^='MyDropDown']").css("width", "auto");
好的，这个选项非常hackish但应该可行。
$(document).ready( function() {
$('#select').change( function() {
$('#hiddenDiv').html( $('#select').val() );
$('#select').width( $('#hiddenDiv').width() );
}
}
哪个会需要一个隐藏的div。
<div id="hiddenDiv" style="visibility:hidden"></div>
哦，你需要jQuery