Как расширить ширину опции «выбрать» после того, как пользователь хочет выбрать опцию - PullRequest
Новая
       13

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

25 голосов
/ 16 ноября 2008

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

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

Я хочу иметь возможность показывать второй вариант, чтобы пользователь мог видеть всю длину текста.

Как и все остальное. Это отлично работает в Firefox, но не работает с Internet Explorer6.

Ответы [ 11 ]

14 голосов
/ 19 февраля 2009

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

<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

12 голосов
/ 16 ноября 2008

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

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

Если вы добавляете длинную опцию позже через JavaScript, посмотрите здесь: Как динамически обновить HTML-поле «Выбрать» в IE

5 голосов
/ 17 февраля 2011

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

  <!--

     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>

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

3 голосов
/ 02 июня 2015

Я исправил это на своей странице начальной загрузки, установив 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>
3 голосов
/ 02 сентября 2011

Поместите это в div и дать ему идентификатор 

<div id=myForm>

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

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

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

1 голос
/ 30 мая 2012

Пример 

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");
1 голос
/ 06 октября 2010

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

0 голосов
/ 25 марта 2019

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

Вы можете попытаться решить, используя только CSS. добавив класс, чтобы выбрать 

select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}

для дополнительной информации Стиль списка в определенном элементе (опция) HTML

Поле выбора нескольких элементов

0 голосов
/ 03 июля 2009

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

Страница:
...