Спасибо за чтение. Я немного новичок в jQuery и пытаюсь создать скрипт, который я могу включить во все мои сайты, чтобы решить проблему, которая всегда сводит меня с ума ...
Проблема:
Выделенные поля с длинными параметрами отключаются в Internet Explorer. Например, эти поля выбора:
http://discoverfire.com/test/select.php
В Firefox они хороши, но в IE опции обрезаются до ширины выбора, когда они выпадают.
Решение:
Что я хочу сделать, так это создать скрипт, который я могу включить в любую страницу, которая будет выполнять следующие действия:
Перебрать все выборки на странице.
Для каждого выберите:
А. Переберите свои варианты.
Б. Найдите ширину самого длинного варианта.
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 возвращает ноль для ширины опций фактического выбора.
Любые идеи приветствуются как для заданных вопросов, так и для любых других улучшений в моем коде.
Спасибо !!