Как показать расширенную опцию в списке выбора?

Question

При использовании тега select с фиксированной шириной в IE есть одна ошибка. Когда содержание параметра в теге select превышает ширину тега select, его скрыть. Работает нормально в Fire Fox, а не в IE.

альтернативный текст http://img691.imageshack.us/img691/4530/dropdown.gif

Answer 1

Это ошибка в IE, и ее невозможно исправить, кроме расширения поля выбора:

<select style="width: 500px;">
  <option value="1">
    This is a very long option, but it's cool, cause the select is also very long
  </option>
</select>

Другая альтернатива - это использование фреймворка, который заменит selectbox стилизованной комбинацией других элементов. Они будут вести себя как окно выбора, но для работы потребуется JavaScript.

Answer 2

Решение, которое я придумал (которого я не нашел нигде во всем своем поиске), было очень простым: когда пользователь щелкает список выбора, меняйте класс на один без ограничений по ширине. Когда они сделают выбор, поменяйте класс обратно на один с ограничениями ширины.

Вот пример с использованием jquery.

$(function() {

$(".SecuritySelect")

    .mouseover(function(){
        $(this)
            .data("origWidth", $(this).css("width"))
            .css("width", "auto");
    })

    .mouseout(function(){
        $(this).css("width", $(this).data("origWidth"));
    });

});

Answer 3

Существует проект на github для этого в качестве плагина jQuery: http://css -tricks.com / выберите обрезки-офф-опция-в-т затруднительного /

Просто используйте его как:

$(document).ready(function () {
    //all select lists expand to full width when selected
    $("select").ieExpandSelectWidth();
});

Answer 4

Перечисленные решения плохие. Один, который я нашел и использовал, был

$('select#CourtId')
    .focus(function() { $('select#CourtId').css('position', 'relative').css('margin-right', '-300px').css('min-width', $('select#CourtId').css('width')).css('width', 'auto'); })
    .blur(function() { $('select#CourtId').removeAttr('style'); });

Answer 5

Hedgerwow предлагает отличное решение этой проблемы:

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/bk/demo.php

Он попадает в действительно приятное меню DHTML, но делает это очень чисто. Твердое исправление.

Answer 6

Я никогда не пробовал этого, но вы можете попробовать установить поле ввода

position: absolute

и, например,

width: 500

onFocus и установите его на нормальное значение onBlur . Возможно, вам придется немного изменить свой макет, чтобы он не шевелился, но я не могу придумать, почему это не должно работать.