Установить ширину выпадающего элемента в HTML выберите раскрывающийся список

Question

Я работаю над веб-сайтом, который включает автоматическое заполнение окна выбора с использованием PHP-скрипта. Все это прекрасно работает, но проблема заключается в том, что то, что я использую для заполнения текстового поля, имеет очень длинные заголовки (это статьи журналов и заголовки презентаций). Выпадающий квадрат простирается до ширины самого длинного элемента, который простирается от края экрана, поэтому сделать полосу прокрутки невозможно. Я пробовал различные методы, пытаясь вручную установить раскрывающийся список с помощью CSS на определенную ширину, но до сих пор безрезультатно. Лучшее, что я сделал, чтобы установить поле «Выбор» на определенную ширину, но выпадающее меню само по себе намного шире.

Любые советы по этому вопросу будут очень признательны.

EDIT:

Оказывается, что следующий CSS линия работает во всех основных браузерах для Google Chrome (который является то, что я тестировал страницу в), за исключением. Если решение для Chrome известно, об этом было бы полезно узнать.

select, option { width: __; } 

Answer 1

Вы можете стиль (хотя и с некоторыми ограничениями) сами фактические элементы с option селекторе:

select, option { width: __; } 

Таким образом, вы не только сдерживающим раскрывающийся, но и все его элементы ,

Answer 2

На стороне сервера:

1. Определить максимальную длину строки
2. Clip строка
3. (по желанию) добавить горизонтальное многоточие

Альтернативного решения: выбор элемента в вашем случае (только гадание) - элемент управления с одним выбором, и вместо этого вы можете использовать группу переключателей. Тогда вы могли бы лучше стилизовать стиль. Если у вас есть выбор [@multiple], вы можете сделать то же самое с группой флажков, потому что оба они могут рассматриваться как элемент управления с несколькими вариантами выбора.

Answer 3

Я считаю, что лучший способ обработки длинных выпадающих списков - разместить его в контейнере с фиксированной шириной div и использовать ширину: автоматически по тегу select. Большинство браузеров будут содержать раскрывающийся список в div, но когда вы нажмете на него, он будет расширяться, чтобы отобразить полное значение параметра. Он не работает с IE Explorer, но есть исправление (как всегда, необходимо с IE). Ваш код будет выглядеть примерно так.

HTML

<div class="dropdown_container"> 
    <select class="my_dropdown" id="my_dropdown"> 
    <option value="1">LONG OPTION</option> 
    <option value="2">short</option> 
    </select> 
</div> 

CSS

div.dropdown_container { 
    width:10px; 
} 

select.my_dropdown { 
    width:auto; 
} 

/*IE FIX */ 
select#my_dropdown { 
    width:100%; 
} 

select:focus#my_dropdown { 
    width:auto\9; 
} 

Answer 4

Малый и лучше Один

var i = 0; 
$("#container > option").each(function(){ 
    if($(this).val().length > i) { 
     i = $(this).val().length; 

     console.log(i); 
     console.log($(this).val()); 
    } 
}); 

Answer 5

Малый и лучший Один

#test{ 
width: 202px; 
} 
<select id="test" size="1" name="mrraja"> 

Answer 6

и можно просто использовать «ширина» атрибут «стиль», чтобы изменить длину выпадающего списка

<select class="my_dropdown" id="my_dropdown" style="width:APPROPRIATE WIDTH IN PIXLES"> 
<option value="1">LONG OPTION</option> 
<option value="2">short</option> 
</select> 

например,

style="width:200px" 

Answer 7

HTML:

<select class="shortenedSelect"> 
    <option value="0" disabled>Please select an item</option> 
    <option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option> 
</select> 

CSS:

.shortenedSelect { 
    max-width: 350px; 
} 

Javascript:

// Shorten select option text if it stretches beyond max-width of select element 
$.each($('.shortenedSelect option'), function(key, optionElement) { 
    var curText = $(optionElement).text(); 
    $(this).attr('title', curText); 

    // Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system. 
    var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10)/7.3); 

    if (curText.length > lengthToShortenTo) { 
     $(this).text('... ' + curText.substring((curText.length - lengthToShortenTo), curText.length)); 
    } 
}); 

// Show full name in tooltip after choosing an option 
$('.shortenedSelect').change(function() { 
    $(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title'))); 
}); 

отлично работает. У меня была такая же проблема. Проверьте это JSFiddle http://jsfiddle.net/jNWS6/426/