Выберите раскрывающийся список с фиксированной шириной обрезки содержимого в IE

Не без javascript, я тоже боюсь, и для моего решения требуется библиотека js, однако вы можете использовать только те файлы, которые вам нужны, а не использовать их все, возможно, лучше всего подходят для тех, кто уже использует YUI для своих проектов или решает, какие один для использования. Взгляните на: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

В моем сообщении в блоге также обсуждаются другие решения, одно из которых упоминается здесь, в stackoverflow, почему я вернулся, чтобы создать свой собственный элемент SELECT, по простой причине, мне не нравятся события развертывания при наведении курсора мыши. Может быть, если это поможет кому-то еще!

Решение jquery BalusC улучшено мной. Также используется: здесь.

Просто поместите это в .js, используйте широкий класс для желаемых комбинаций и не пытайтесь присвоить ему идентификатор. Вызовите функцию в onload (или documentReady или что-то еще).
Как простая задница :)
Она будет использовать ширину, которую вы определили для комбо, как минимальную длину.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}

Он протестирован во всех версиях IE, Chrome, FF и Safari.

// Код JavaScript

    <script type="text/javascript">
    <!-- begin hiding
    function expandSELECT(sel) {
      sel.style.width = '';
    }
    function contractSELECT(sel) {
      sel.style.width = '100px';
    }
    // end hiding -->
    </script>

// Html code

    <select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
      <option value="0" selected="selected" readonly="readonly">Select</option>
    <option value="1" >Apple</option>
    <option value="2" >Orange + Banana + Grapes</option>

У меня есть еще один вклад в это. Я написал это некоторое время назад, и это может вам помочь: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

Это плагин jquery для создания неупорядоченного списка со стилем, поддерживаемого скрытым элементом выбора.

Источник находится на github: https://github.com/tncbbthositg/GiantDropdown

Вы сможете обрабатывать поведение и стили в UL, чего не можете сделать с помощью SELECT. Все остальное должно быть таким же, потому что список выбора все еще существует, он просто скрыт, но UL будет использовать его в качестве резервного хранилища данных (если хотите).

Я хотел, чтобы это работало с выбранными элементами, которые я динамически добавлял на страницу, поэтому после множества экспериментов я закончил тем, что предоставил все выбранные элементы, которые я хотел сделать, с помощью класса «fixedwidth», а затем добавил следующий CSS:

table#System_table select.fixedwidth { width: 10em; }
table#System_table select.fixedwidth.clicked { width: auto; }

и этот код

<!--[if lt IE 9]>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(document).on(
              {
                'mouseenter': function(event) {
                    jQuery(this).addClass('clicked');
                    },
                'focusout change blur': function() {
                    jQuery(this).removeClass('clicked');
                    }
              }, 'select.fixedwidth');
        });
    </script>
<![endif]-->

Несколько замечаний:

• Несмотря на то, что все мои выборки находятся в таблице, мне пришлось сделать «on» для jQuery(document).on, а не для jQuery('table#System_table').on
• Несмотря на то, что в документации jQuery говорится об использовании «mouseleave» вместо «blur», я обнаружил, что в IE7, когда я перемещал мышь вниз по раскрывающемуся списку, он получал событие mouseleave, но не blur.

Вот решение, которое действительно работает.

Он устанавливает ширину в IE и не портит макет страницы и не закрывает раскрывающийся список при наведении указателя мыши на параметры выбора, как некоторые другие решения на этой странице.

Однако вам нужно будет изменить значение margin-right и значения ширины, чтобы они соответствовали тому, что у вас есть для выбранных полей.

Также вы можете заменить $('select') на $('#Your_Select_ID_HERE'), чтобы воздействовать только на определенное поле выбора. Также вам нужно будет вызвать функцию fixIESelect() в теле onload или через jQuery, используя DOM ready, как я сделал в моем коде ниже:

//////////////////////////
// FIX IE SELECT INPUT //
/////////////////////////
window.fixIESelect_clickset = false;
function fixIESelect()
{
 if ($.browser.msie)
 {
  $('select').mouseenter(function ()
  {
   $(this).css("width","auto");
   $(this).css("margin-right","-100");
  });
  $('select').bind('click focus',function ()
  {
   window.fixIESelect_clickset = true;
  });
  $('select').mouseout(function ()
  {
   if(window.fixIESelect_clickset != true)
   {
    $(this).css("width","93px");
    window.fixIESelect_clickset = false;
   }
  });
  $('select').bind('blur change',function ()
  {
   $(this).css("width","93px");
  });
 }
}
/////////////
// ONLOAD //
////////////
$(document).ready(function()
{
 fixIESelect();
});

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

Я обнаружил, что это именно так: -

http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html

Обходной путь, если вас не волнует странный вид после выбора опции (например, выберите, чтобы перейти на новую страницу):

<!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. -->
<div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'>
  <select onchange='jump();'>
    <!-- '&#9660;(▼)' produces a fake dropdown indicator -->
    <option value=''>Jump to ... &#9660;</option>
    <option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
    ...
  </select>
</div>

Чистое решение css: http://bavotasan.com/2011/style-select-box-using-only-css/

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

Лучшее решение: css + javascript

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });