Cómo expandir el ancho de la opción 'seleccionar' después de que el usuario quiera seleccionar una opción
https://stackoverflow.com/questions/294040
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tal vez esta sea una pregunta fácil, tal vez no. Tengo un cuadro de selección donde codifico con ancho. Decir 120 px.
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>
Deseo poder mostrar la segunda opción para que el usuario pueda ver el texto completo.
Como todo lo demás. Esto funciona bien en Firefox, pero no funciona con Internet Explorer6.
Solución
Si tiene la opción preexistente de forma fija con <select>, y no desea cambiar el ancho mediante programación, puede que no tenga suerte a menos que sea un poco creativo.
- Puede intentar establecer el atributo
titlepara cada opción. Este es HTML no estándar (si te preocupa esta infracción menor aquí), pero IE (y Firefox también) mostrará todo el texto en una ventana emergente del mouse al desplazar el mouse. - Puede usar JavaScript para mostrar el texto en un DIV posicionado cuando el usuario selecciona algo. En mi humilde opinión, esta es la forma no tan agradable de hacerlo, porque requiere JavaScript activado para funcionar, y funciona solo después de que algo se haya seleccionado, antes de eso es un cambio en el valor sin eventos para el cuadro de selección.
- No utiliza un cuadro de selección, pero implementa su funcionalidad usando otro marcado y CSS . No es mi favorito, pero quería mencionarlo.
Si agrega una opción larga más tarde a través de JavaScript, mire aquí: Cómo actualizar HTML & # 8220; seleccione & # 8221; cuadro dinámicamente en IE
Otros consejos
Solucioné mi problema con el siguiente código:
<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>
¡Espero que ayude!
Saludos, Cychan
Esto imita la mayoría del comportamiento que buscas:
<!--
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>
Esto anulará parte del comportamiento de presionar una tecla.
Colóquelo en un div y darle una identificación
<div id=myForm>
luego crea un CSS realmente muy simple para acompañarlo.
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }
Eso es todo lo que necesitas.
Lo arreglé en mi página de arranque configurando el ancho mínimo y el ancho máximo en el mismo valor en la selección y luego configurando la selección: foco en automático.
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>
Una solución simple que utilicé para un sitio existente en IE (usando jQuery, pero puedo volver a publicar con código eventListener si realmente no conoces bien JS) es la siguiente:
if (jQuery.browser.msie) {
jQuery('#mySelect').focus(function() {
jQuery(this).width('auto');
}).bind('blur change', function() {
jQuery(this).width('100%');
});
};
Por supuesto, use una variable (var cWidth = jQuery('#mySelect').width();) para almacenar el ancho anterior, pero esto es todo lo que se requiere para que el nuestro funcione como es de esperar.
Muestra
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());
}
});
}
El siguiente código resolverá su problema de ancho de la lista desplegable agregando este código después de insertar los Datos en la lista desplegable.
$("select[id^='MyDropDown']").css("width", "auto");
Bien, esta opción es bastante hack pero debería funcionar.
$(document).ready( function() {
$('#select').change( function() {
$('#hiddenDiv').html( $('#select').val() );
$('#select').width( $('#hiddenDiv').width() );
}
}
Lo que, por supuesto, requeriría un div oculto.
<div id="hiddenDiv" style="visibility:hidden"></div>
ohh y necesitarás jQuery
Mejoré la solución del cychan, para ser así:
<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>
Los PNG utilizados en las clases css se cargan aquí ...
Y todavía necesitas JQuery .....
puedes intentar resolver usando solo css. agregando clase para seleccionar
select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}
para obtener más referencia Estilo de cuadro de lista en un elemento particular (opción) HTML
Pregunta muy antigua pero aquí está la solución. Aquí tiene un fragmento de trabajo usando jquery. Utiliza un auxiliar select temporal en el que se copia la opción seleccionada de la selección principal, de modo que se puede evaluar el ancho real que debe tener el <=> principal.
$('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()
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>
