jQuery - получить ширину опции в списке выбора?

С помощью следующего я могу получить ширину выбранного входа в пикселях. Можно ли получить ширину опции в списке выбора? Благодарност

$('#mySelect').width();

ОБНОВЛЕНИЕ - вот причина, почему я хочу этого. Мне нужно центрировать текст в списке выбора. Я не могу сделать это кросс-устройство и браузер с CSS-выравнивания текста: центр; Мой единственный вариант - использовать текстовый отступ. Поскольку мой сайт имеет жидкую ширину и параметры имеют разную длину, мне нужно рассчитать это значение динамически.

Так что, если бы я мог получить ширину текста опции выбора, а также получить ширину контейнера (намного проще), то я мог бы рассчитать, каким должен быть текстовый отступ. Благодарност

етод @ NimChimpsky, кажется, работает нормально. Код здесь:jQuery - функция работает нормально, когда срабатывает при нажатии кнопки div, но не при загрузке страницы

 gdoron14 мая 2012 г., 16:16
Какова цель этого?
 Wesley Murch14 мая 2012 г., 16:46
Тогда просто спросите, как центрировать текст в выпадающем списке! Метод подсчета символов в лучшем случае будет взломать, если вы не используете моноширинные шрифты в опциях, как Iiiiiiiiii а также Мммммммммм - это 10 символов, но разной ширины пикселя. Настоящий<option> ширина пикселей будет одинаковой.
 Wesley Murch14 мая 2012 г., 16:13
Не пытаюсь угадать твои мотивы, но мне действительно любопытно: зачем тебе это делать?
 NimChimpsky14 мая 2012 г., 16:49
@ WesleyMurch получить текст, поместить текст в невидимый div, измерить ширину div
 Evanss14 мая 2012 г., 16:24
Обновил мой вопрос. Благодарност

Ответы на вопрос(4)

Решение Вопроса

 ("#mySelect option:selected").text().length

и для определенного элемента индекса (2 здесь) сделайте это:

$("#mySelect option[value='2']").text().length

В качестве альтернативы вы можете взять выделенный текст, поместить его в невидимый div, а затем получить ширину этого div - с помощью обычного метода jquery width.

 Evanss14 мая 2012 г., 16:40
Если бы я использовал твой метод, чтобы получить длину строки, есть ли способ затем вычислить ширину в пикселях, которые они / будут занимать на экране?
 NimChimpsky14 мая 2012 г., 16:43
@ jdln imho только с небольшим количеством хакеров - см. правку
 NimChimpsky14 мая 2012 г., 19:30
круто, ответ принят с минусом голосов, что, должно быть, стоит значка?

сделай новый<span> объект установить текст для одного из вариантов получить вычисленные значения стиля, соответствующие ширине текста из выбранной опции установить эти измеренные значения в диапазон Добавить пролет к телу измерить ширину этого пролета удалить промежуток

Помнить
стрелка вниз (треугольник) не может быть измерена. Это часть браузера Chrome. Для этого разумна магическая ценность около 30 пикселей.

var getOptionWidth = function(opt) {
    var styleProps = [
        'font-family',
        'font-kerning',
        'font-size',
        'font-stretch',
        'font-style',
        'font-variant',
        'font-variant-ligatures',
        'font-weight',
        'text-transform',
        'letter-spacing',
        'word-spacing',
        'padding-left',
        'padding-right'
    ];
    var o = $('<span>')
        .text($(opt).text());
    for (var i=0; i < styleProps.length; i++) {
        o.css(styleProps[i], $(opt).css(styleProps[i]));
    }
    o.appendTo('body');
    var w = o.width();
    o.remove();
    return w;
}

который расширяется и сжимается только до ширины, необходимой для выбранного элемента. Я не проверял совместимость браузера, поскольку он работал только в Safari на iOS8, но я уверен, что это возможно.

HTML селектора

<select id="hack1">
    <option>short option</option>
    <option>loooong looking loooong option</option>
    <option>Longer option but more like the longest</option>
    <option>Medium length selector</option>
</select>

HTML внизу

<select id="hackselect">
    <option></option>
</select>

CSS

#hackselect {
    visibility: hidden;
}

JQuery

$('#hack1').change(function(event) {
    $("#hackselect option:first").text($("#hack1 option:selected").text());
    $('#hack1').css('width', $('#hackselect').width() + 6);
});

+ 6 в последней строке кода есть, потому что у меня есть пользовательские стили для элемента select с 3 отступами на каждой стороне. При измерении ширины это не учитывается, поэтому его необходимо жестко закодировать.

$('#mySelect > option').width();

лективную строку селектора jQuery, чтобы выбрать соответствующий тег опции.

 Evanss14 мая 2012 г., 16:14
@ Тедди код всегда возвращает 0.
 Wesley Murch14 мая 2012 г., 16:16
@ jdln: Твой<select> должен иметьid="mySelect" чтобы это сработало.
 Wesley Murch14 мая 2012 г., 16:13
Не все<option> та же ширина в выпадающем меню?
 Wesley Murch14 мая 2012 г., 16:20
@ jdln: Что именно вы действительно хотите? Вы задаете разные вопросы.<option> ширина пикселя в целом будет одинаковой в одном и том же выпадающем меню, независимо от длины текста (это то, что вы хотите?). Вы хотитеценност выбранного? Тогда просто используйте$('#mySelect').val()
 Teddy14 мая 2012 г., 16:14
Да, но это вроде какwidth:auto;. Я предполагаю, что это связано с самой словоименной опцией в списке опций.

Ваш ответ на вопрос