Как расширить ширину опции "выбрать" после того, как пользователь захочет выбрать опцию
https://stackoverflow.com/questions/294040
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Может быть, это простой вопрос, а может быть, и нет.У меня есть поле выбора, где я жестко задаю ширину.Скажем, 120 пикселей.
<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 для отображения текста в некотором расположенном DIV, когда пользователь что-то выбирает.ИМХО, это тот не-такой-уж-приятный способ сделать это, потому что для работы вообще требуется JavaScript, и он работает только после что-то было выбрано - до изменения значения никакие события для поля выбора не запускаются.
- Вы вообще не используете поле выбора, но реализуйте его функциональность, используя другую разметку и CSS.Не мой любимый, но я хотел упомянуть об этом.
Если вы добавите длинную опцию позже с помощью JavaScript, посмотрите здесь: Как динамически обновлять HTML-поле “выбрать” в IE
Другие советы
Я исправил свою проблему с помощью следующего кода:
<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>Надеюсь, это поможет!
Приветствия, Сайчан
Это имитирует большую часть поведения, которое вы ищете:
<!--
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 и дайте ему идентификатор
<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>Простое решение, которое я использовал для существующего сайта в IE (используя jQuery, но я могу опубликовать ответ с eventListener код, если вы действительно не так хорошо знаете JS) заключается в следующем:
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");
Ладно, этот вариант довольно халтурный, но должен сработать.
$(document).ready( function() {
$('#select').change( function() {
$('#hiddenDiv').html( $('#select').val() );
$('#select').width( $('#hiddenDiv').width() );
}
}
Что, конечно, потребовало бы скрытого div.
<div id="hiddenDiv" style="visibility:hidden"></div>
ооо, и вам понадобится jQuery
Я улучшил решение 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>
PNGS, используемые в классах css, загружены здесь...
И вам все еще нужен jQuery.....
вы можете попробовать решить проблему, используя только css.добавив класс для выбора
select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}
для получения дополнительной информации Стиль окна списка в определенном элементе (опция) HTML
Очень старый вопрос, но вот решение.Здесь у вас есть рабочий фрагмент, использующий 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()
})<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>
