IE <select>, как сделать отображаемую ширину наименьшей из возможных для текущих опций - PullRequest
Новая
       13

IE <select>, как сделать отображаемую ширину наименьшей из возможных для текущих опций

1 голос
/ 26 ноября 2010

Я написал функцию, которая принимает <select> ID и заменяет все опции новыми (используя jQuery's html()).Однако в IE ширина раскрывающегося списка остается исходной, размер которой намного больше того, что мне нужно отобразить, потому что он основан на оригинальных <option> с длинными заголовками строк.Есть ли способ заставить <select> пересчитать его ширину?

Я использую IE 8.

Ответы [ 2 ]

2 голосов
/ 26 ноября 2010

Я думаю, что прагматичным решением было бы заменить весь элемент <select>.Таким образом, вновь вставленный элемент будет иметь правильную ширину для своих элементов <option> (не учитывая любой другой стиль, который может быть применен).

При замене целого элемента следует помнить, что любые ссылкиДля замены элемента потребуется очистить его перед удалением из DOM (чтобы избежать возможных утечек памяти) и обработчиками событий, прикрепленными к вновь вставленному элементу.

1 голос
/ 26 ноября 2010

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

Если вы используете em или ex в качестве единиц размера шрифта, то, поскольку это значение основано на высоте, вы можете предположить, используя определенное соотношение, что оно почти близко к ширине символа. Исходя из этого, вы можете реально рассчитать ширину выбранного элемента с помощью:

1-й: получить количество символов наименьшей строки из опций выбора. 2-й: умножьте это на значение em. 3-й: установите это значение как ширину выбора.

используя jquery, который будет достигнут через: 

var em = 1em; //assign here a value, that corresponds to your layout's font size
var shortest = 6500;
$('mySelect').each(function(i, selected){
   temp = $(selected).text().length();
   shortest = (temp < shortest) ? temp : shortest;
});
$('mySelect').css('width',(shortest*em + 1) + 'em'); //add 1em for the scrollbar
...