Благодаря за четенето. Аз съм малко нов в jQuery и се опитвам да направя скрипт, който мога да включа във всичките си уебсайтове, за да реша проблем, който винаги ме подлудява...
Проблемът: Изберете полета с дълги опции се отрязват в Internet Explorer. Например тези полета за избор: http://discoverfire.com/test/select.php
Във Firefox те са добре, но в IE опциите се изрязват до ширината на селекцията, когато се спуснат.
Решението: Това, което искам да направя, е да създам скрипт, който мога да включа във всяка страница, който ще направи следното:
Прегледайте всички избрани на страницата.
За всеки изберете: A. Прегледайте опциите му. B. Намерете ширината на най-дългата опция. 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 връща нула за ширините на опциите на действителните избрани.
Всякакви идеи са много добре дошли, както за зададените въпроси, така и за всякакви други подобрения на моя код.
Благодаря!!
