jQuery 用户想要选择选项后如何扩展“选择”选项宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/294040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to expand 'select' option width after the user wants to select an option
提问by Berlin Brown
Maybe this is an easy question, maybe not. I have a select box where I hardcode with width. Say 120px.
也许这是一个简单的问题，也许不是。我有一个选择框，我用宽度硬编码。说 120px。
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>I want to be able to show the second option so that the user can see the full length of the text.
我希望能够显示第二个选项，以便用户可以看到文本的全长。
Like everything else. This works fine in Firefox, but doesn't work with Internet Explorer6.
像其他一切一样。这在 Firefox 中工作正常，但不适用于 Internet Explorer6。
采纳答案by Tomalak
If you have the option pre-existing in a fixed-with <select>, and you don't want to change the width programmatically, you could be out of luck unless you get a little creative.
如果您在 fixed-with 中预先存在该选项<select>，并且您不想以编程方式更改宽度，那么除非您有点创意，否则您可能会走运。
- You could try and set the
titleattribute to each option. This is non-standard HTML (if you care for this minor infraction here), but IE (and Firefox as well) will display the entire text in a mouse popup on mouse hover. - You could use JavaScript to show the text in some positioned DIV when the user selects something. IMHO this is the not-so-niceway to do it, because it requires JavaScript on to work at all, and it works only aftersomething has been selected - before there is a change in value no events fire for the select box.
- You don't use a select box at all, but implement its functionality using other markup and CSS. Not my favorite but I wanted to mention it.
- 您可以尝试
title为每个选项设置属性。这是非标准的 HTML（如果您关心这里的小违规），但 IE（以及 Firefox）将在鼠标悬停时在鼠标弹出窗口中显示整个文本。 - 当用户选择某些内容时，您可以使用 JavaScript 在某个定位的 DIV 中显示文本。恕我直言，这是一种不太好的方法，因为它完全需要 JavaScript 才能工作，并且只有在选择某些内容后才能工作- 在值发生变化之前，选择框不会触发任何事件。
- 您根本不使用选择框，而是使用其他标记和 CSS 实现其功能。不是我最喜欢的，但我想提一下。
If you are adding a long option later through JavaScript, look here: How to update HTML “select” box dynamically in IE
如果您稍后通过 JavaScript 添加长选项，请查看此处：如何在 IE 中动态更新 HTML“选择”框
回答by Berlin Brown
I fixed my problem with the following code:
我用以下代码解决了我的问题：
<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>Hope it helps!
希望能帮助到你！
回答by Doug Peil
This mimics most of the behavior your looking for:
这模仿了您寻找的大部分行为：
<!--
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>
This will override some of the key-press behavior.
这将覆盖一些按键行为。
回答by tpham211
Place it in a div and give it an id
把它放在一个 div 中并给它一个 id
<div id=myForm>
then create a really really simple css to go with it.
然后创建一个非常简单的 css 来使用它。
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }
That's all you need.
这就是你所需要的。
回答by iansoccer9
I fixed it in my bootstrap page by setting the min-width and max-width to the same value in the select and then setting the select:focus to auto.
我通过在选择中将 min-width 和 max-width 设置为相同的值，然后将 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>回答by Jo?o Pimentel Ferreira
Very old question but here's the solution. Here you have a working snippet using jquery. It makes use of a temporary auxiliary selectinto which the selected option from the main select is copied, such that one can assess the true width which the main selectshould have.
很老的问题，但这是解决方案。在这里，您有一个使用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>回答by Eric
A simple solution I used for an existing site in IE (using jQuery, but I can post back with eventListenercode if you really don't know JS that well) is the following:
我在 IE 中用于现有站点的一个简单解决方案（使用 jQuery，但eventListener如果您真的不太了解 JS，我可以用代码回发）如下：
if (jQuery.browser.msie) {
jQuery('#mySelect').focus(function() {
jQuery(this).width('auto');
}).bind('blur change', function() {
jQuery(this).width('100%');
});
};
Of course, use a variable (var cWidth = jQuery('#mySelect').width();) to store the previous width, but this is all that was required for ours to work as you'd expect.
当然，使用变量 ( var cWidth = jQuery('#mySelect').width();) 来存储先前的宽度，但这就是我们要按您期望的方式工作所需的全部内容。
回答by Doni
Sample
样本
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());
}
});
}
The below code will solve your problem of dropdownlist width by adding this code after insertion of Data to dropdownlist.
下面的代码将通过在将数据插入下拉列表后添加此代码来解决您的下拉列表宽度问题。
$("select[id^='MyDropDown']").css("width", "auto");
回答by Web Designer cum Promoter
you can try and solve using css only. by adding class to select
您可以尝试仅使用 css 解决。通过添加类来选择
select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}
for more reference List Box Style in a particular item (option) HTML
有关特定项目（选项）HTML 中的更多参考列表框样式
回答by Pim Jager
Okay, this option is pretty hackish but should work.
好的，这个选项很hackish，但应该可以工作。
$(document).ready( function() {
$('#select').change( function() {
$('#hiddenDiv').html( $('#select').val() );
$('#select').width( $('#hiddenDiv').width() );
}
}
Which would offcourse require a hidden div.
这当然需要一个隐藏的div。
<div id="hiddenDiv" style="visibility:hidden"></div>
ohh and you will need jQuery
哦，你将需要 jQuery
