Спасибо за чтение. Я немного новичок в jQuery и пытаюсь создать скрипт, который я могу включить на все свои веб-сайты, чтобы решить проблему, которая всегда сводит меня с ума...
Проблема: окна выбора с длинными параметрами обрезаются в Internet Explorer. Например, эти поля выбора: http://discoverfire.com/test/select.php
В Firefox они в порядке, но в IE параметры обрезаются до ширины выбора, когда они выпадают.
Решение: то, что я хочу сделать, это создать сценарий, который я могу включить на любую страницу, который будет делать следующее:
Прокрутите все выборки на странице.
Для каждого выбора: A. Просмотрите его параметры. Б. Найдите ширину самого длинного варианта. C. Привяжите функцию, чтобы расширить выбор до этой ширины в фокусе (или, может быть, щелчок...). D. Привяжите функцию для уменьшения исходной ширины при размытии.
Мне удалось сделать большую часть шага № 2 для одного поля выбора.
Я обнаружил, что получение ширины параметров было проблемой (особенно в IE), поэтому я перебрал и скопировал текст каждого параметра в диапазон, измерил ширину диапазона и использовал самый длинный из них в качестве ширины, до которой будет расширен выбор. . Возможно, у кого-то есть идея получше.
Вот код
<script type='text/javascript'>
$(function() {
/*
This function will:
1. Create a data store for the select called ResizeToWidth.
2. Populate it with the width of the longest option, as approximated by span width.
The data store can then be used
*/
// Make a temporary span to hold the text of the options.
$('body').append("<span id='CurrentOptWidth'></span>");
$("#TheSelect option").each(function(i){
// If this is the first time through, zero out ResizeToWidth (or it will end up NaN).
if ( isNaN( $(this).parent().data('ResizeToWidth') ) ) {
$(this).parent().data( 'OriginalWidth', $(this).parent().width() );
$(this).parent().data('ResizeToWidth', 0);
$('CurrentOptWidth').css('font-family', $(this).css('font-family') );
$('CurrentOptWidth').css('font-size', $(this).css('font-size') );
$('CurrentOptWidth').css('font-weight', $(this).css('font-weight') );
}
// Put the text of the current option into the span.
$('#CurrentOptWidth').text( $(this).text() );
// Set ResizeToWidth to the longer of a) the current opt width, or b) itself.
//So it will hold the width of the longest option when we are done
ResizeToWidth = Math.max( $('#CurrentOptWidth').width() , $(this).parent().data('ResizeToWidth') );
// Update parent ResizeToWidth data.
$(this).parent().data('ResizeToWidth', ResizeToWidth)
});
// Remove the temporary span.
$('#CurrentOptWidth').remove();
$('#TheSelect').focus(function(){
$(this).width( $(this).data('ResizeToWidth') );
});
$('#TheSelect').blur(function(){
$(this).width( $(this).data('OriginalWidth') );
});
alert( $('#TheSelect').data('OriginalWidth') );
alert( $('#TheSelect').data('ResizeToWidth') );
});
</script>
и выберите:
<select id='TheSelect' style='width:50px;'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
<option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
<option value='5'>Five</option>
<option value='6'>Six</option>
<option value='7'>Seven...</option>
</select>
Надеюсь, это будет работать для вас, если вы захотите, или вы можете увидеть его в действии здесь: http://discoverfire.com/test/select.php.
В чем мне нужна помощь: это требует некоторой доработки, но, похоже, работает нормально, если вы укажете поле выбора.
Однако я, похоже, не могу понять, как применить его ко всем полям выбора на странице с циклом. Пока что у меня это:
$('select').each(
function(i, select){
// Get the options for the select here... can I use select.each...?
}
);
Кроме того, есть ли лучший способ получить длину самого длинного варианта для каждого выбора? Размах близок, но не очень точен. Проблема в том, что IE возвращает ноль для ширины опций фактического выбора.
Приветствуются любые идеи, как по заданным вопросам, так и по любым другим улучшениям моего кода.
Спасибо!!