Смена индекса пунктов в элементе select

TanaTiX · Регистрация: 19.02.2011

Студворк — интернет-сервис помощи студентам

Есть массив вида ключ-значение. Он целиком помещается в элемент select. Как нужные элементы (по любому из признаков) поместить в начало в нужном порядке? Заранее спасибо.

@Lazy_Den · 23.10.2014, 20:21

Сообщение от TanaTiX

нужные элементы ... поместить в начало

То есть не сортировка, а выборочное перемещение? Один элемент или несколько сразу?

Не по теме:

Сообщение от TanaTiX

Он целиком помещается в элемент select

Это хорошо. А то некрасиво, когда что-то торчит из-под селекта :)

TanaTiX · 23.10.2014, 20:51 **[ТС]**

Сообщение от Lazy_Den

Это хорошо. А то некрасиво, когда что-то торчит из-под селекта

Это я к тому, что предварительной сортировки не происходит.
Да, перемещается несколько объектов, в нужном порядке. Сортировка не требуется. Я вот думаю, их на начальном этапе выделять или можно без лишних циклов уже после заполнения элементов переместить.

@Lazy_Den · 23.10.2014, 21:00

Сообщение от TanaTiX

или можно без лишних циклов

Можно. Главное правильно подобрать селектор и применить метод prependTo(), ну и можно установить ему атрибут selected. Например, примитивненько, ищем по значению и перемещаем вверх:

JavaScript
1
$('option[value=abc]').prependTo('.my_select').prop('selected', true);

TanaTiX · 23.10.2014, 22:27 **[ТС]**

Нужно сделать выборку по содержимому между тегами option

HTML5
1
2
3
4
5
6
<select>
    <option>val 1</option>
    <option>val 2</option>
    <option>val 3</option>
    <option>val45</option>
</select>

Я понимаю, что этот вопрос уже больше по css, но гугление не дало результат.

@Lazy_Den · 23.10.2014, 22:34

Сообщение от TanaTiX

Я понимаю, что этот вопрос уже больше по css

С какой это стати? Или же я не правильно понял вопрос, или же это делается так:

JavaScript
1
$('option:contains(val 3)').prependTo('.my_select').prop('selected', true);

Добавлено через 2 минуты
P.S. Другое дело, что корректность, опять-таки, упирается в правильном селекторе. Пример выше - "подцепит" не только "val 3", но и "val 333". Поэтому способ конструирования селектора, нужно подбирать исходя из ситуации.

TanaTiX · 23.10.2014, 22:46 **[ТС]**

У меня сейчас проблема в том, что селектор не срабатывает. До prependTo дело даже не доходит.

JavaScript
1
$('option:contains(val 3)').addClass("test");

CSS
1
2
3
.test{
    background-color:red;
}

@Lazy_Den · 23.10.2014, 22:54

TanaTiX, проверять элементы option с помощью background - плохая идея. Уж лучше проверить удалением:

JavaScript
1
$('option:contains(val 3)').remove();

Добавлено через 2 минуты
И попробуйте изменить код таким образом:

JavaScript
1
2
3
$('option').filter(function(){
    return $(this).val() == 'val 3';
}).prependTo('.my_select').prop('selected', true);

Так будет более надёжно и элемент будет отфильтровываться по строгому совпадению.

TanaTiX · 23.10.2014, 22:54 **[ТС]**

Lazy_Den, все равно не работает

@Lazy_Den · 23.10.2014, 22:59

И еще... В примере я указываю целевой select с классом "my_select". Проверьте, чтоб класс или id вашего селекта был корректен.

Добавлено через 2 минуты

Сообщение от TanaTiX

все равно не работает

Тогда нужно переходить к стандартным вопросам:
1. Обернут ли код в DOM-Ready?
2. Элементы списка загружаются вместе со страницей или добавляются динамически?
3. Верны ли классы/идентификаторы, используемые в коде?
4. О чём кричит консоль?

TanaTiX · 23.10.2014, 23:05 **[ТС]**

http://jsfiddle.net/kknvcdv6/

@Lazy_Den · 23.10.2014, 23:14

TanaTiX, я же писал выше, чтоб проверили селектор у select... Повторю, что в моём примере у него есть класс "my_select", а у вас такого класса нет. Выход: или добавить такой же класс в select, или придумать свой класс, но изменить потом в JS-коде, или без классов, без id, а просто по названию тега. Только в последнем случае, если у вас будет несколько элементом select на странице, то элемент добавиться не к одному, а ко всем.

JavaScript
1
2
3
$('option').filter(function(){
    return $(this).val() == 'val 3';
}).prependTo('select').prop('selected', true);

TanaTiX · 23.10.2014, 23:25 **[ТС]**

У меня начинает складываться впечатление, что "смотрю в книгу - вижу фигу". Пока, что бы далеко не бегать смотрю на jsfiddle. html оставил свой, js - ваш последний. Там нигде классы не используются, выборка идет по названиям тегов. Но я не замечаю никакого "особого" поведения. Я так понимаю, что указанный js-код должен выбирать ту пару тегов select, между которыми написано "val 3" и перемещать его в самое начало, а также делать выбранным по умолчанию?

Не по теме:

Кстати, он (js) при таком подходе разве не как цикл работает?

Но у меня при клике по кнопке Run в списке по прежнему на 1м месте стоит "val 1".

@Lazy_Den · 23.10.2014, 23:30

Сообщение от TanaTiX

смотрю на jsfiddle

И там всё прекрасно работает. Слева в колонке, нужно выбрать ту библиотеку, с которой работаем.

TanaTiX · 23.10.2014, 23:32 **[ТС]**

Да уж, прокол там, где не ждали. Спасибо за терпение.

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

TanaTiX Модератор 2936 / 1795 / 180 Регистрация: 19.02.2011 Сообщений: 6,552

	Смена индекса пунктов в элементе select 23.10.2014, 20:02. Показов 1732. Ответов 14 Метки нет (Все метки) Есть массив вида ключ-значение. Он целиком помещается в элемент select. Как нужные элементы (по любому из признаков) поместить в начало в нужном порядке? Заранее спасибо. 0

TanaTiX Модератор 2936 / 1795 / 180 Регистрация: 19.02.2011 Сообщений: 6,552
	23.10.2014, 22:54 [ТС]
	Lazy_Den, все равно не работает 0

TanaTiX Модератор 2936 / 1795 / 180 Регистрация: 19.02.2011 Сообщений: 6,552
	23.10.2014, 23:05 [ТС]
	http://jsfiddle.net/kknvcdv6/ 0

TanaTiX Модератор 2936 / 1795 / 180 Регистрация: 19.02.2011 Сообщений: 6,552
	23.10.2014, 23:25 [ТС]
	У меня начинает складываться впечатление, что "смотрю в книгу - вижу фигу". Пока, что бы далеко не бегать смотрю на jsfiddle. html оставил свой, js - ваш последний. Там нигде классы не используются, выборка идет по названиям тегов. Но я не замечаю никакого "особого" поведения. Я так понимаю, что указанный js-код должен выбирать ту пару тегов select, между которыми написано "val 3" и перемещать его в самое начало, а также делать выбранным по умолчанию? Не по теме: Кстати, он (js) при таком подходе разве не как цикл работает? Но у меня при клике по кнопке Run в списке по прежнему на 1м месте стоит "val 1". 0

TanaTiX Модератор 2936 / 1795 / 180 Регистрация: 19.02.2011 Сообщений: 6,552
	23.10.2014, 23:32 [ТС]
	Да уж, прокол там, где не ждали. Спасибо за терпение. 0

Смена индекса пунктов в элементе select

Решение