Как расширить ширину опции 'select' после того, как пользователь захочет выбрать опцию

Возможно, это простой вопрос, может быть, нет. У меня есть поле выбора, где я жестко задаю ширину. Скажите 120px.

<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

ОТВЕТЫ

Ответ 1

Если у вас есть опция, ранее существовавшая в фиксированном-с <select>, и вы не хотите программно изменять ширину, вам может быть не повезло, если вы не получите небольшое объявление.

  • Вы можете попробовать и установить атрибут title для каждой опции. Это нестандартный HTML (если вы заботитесь об этом незначительном нарушении здесь), но IE (и Firefox также) отобразит весь текст во всплывающем окне мыши при наведении мыши.
  • Вы можете использовать JavaScript для отображения текста в некоторых позициях DIV, когда пользователь выбирает что-то. ИМХО это не очень приятный способ сделать это, потому что для его работы требуется JavaScript, и он работает только после того, как что-то было выбрано - до того, как в поле выбора произойдёт изменение значения. /li >
  • Вы не используете поле выбора вообще, но реализуете его с помощью другой разметки и CSS. Не мой любимый, но я хотел упомянуть об этом.

Если вы добавили длинный вариант позже через JavaScript, посмотрите здесь: Как обновить флажок "выбрать" в динамическом режиме в IE

Ответ 2

Я исправил свою проблему с помощью следующего кода:

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

Ответ 3

Это подражает большинству поведения, которое вы ищете:     

  <!--

     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>

Это приведет к переопределению некоторых действий нажатия клавиш.

Ответ 4

Поместите его в div и дать ему id

<div id=myForm>

тогда создайте действительно очень простой css, чтобы пойти с ним.

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

Это все, что вам нужно.

Ответ 5

Я установил его на странице начальной загрузки, установив для параметра min-width и max-width значение, равное одному и тому же значению, и затем установите для параметра select: focus to 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>

Ответ 6

Простое решение, которое я использовал для существующего сайта в 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();) для хранения предыдущей ширины, но это все, что требовалось для нашей работы, как и следовало ожидать.

Ответ 7

Пример

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

Нижеприведенный код решит вашу проблему с шириной списка, добавив этот код после вставки Data в выпадающий список.

$("select[id^='MyDropDown']").css("width", "auto");

Ответ 8

Очень старый вопрос, но здесь решение. Здесь у вас есть рабочий фрагмент с использованием 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>

Ответ 9

Хорошо, этот вариант довольно хакерский, но должен работать.

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

Для чего требуется скрытый div.

<div id="hiddenDiv" style="visibility:hidden"></div>

ohh, и вам понадобится jQuery

Ответ 10

Я улучшил решение 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>

Здесь загружаются PNG, используемые в классах css...

И вам все еще нужен JQuery.....