jQuery работа с select


Очень часто приходится сталкиваться с выпадающим HTML списком <select>, по этому на заметку оставлю несколько селекторов jQuery.

Например, у нас имеется простенький <select id=”my_select” name=”my_select”> с id=”my_select”

<select id="my_select" name="my_select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

1) Самое простое – получить значение выбранного элемента

$("#my_select option:selected").val();
сокращенно:
$("#my_select :selected").val();
или:
$("select#my_select").val();

2) Получаем текст того же выбранного элемента

$("#my_select :selected").html();
или:
$("#my_select :selected").text();

3) Сделать <select> недоступным

$("#my_select").attr("disabled","disabled");

4) Разблокировать <select>

$("#my_select").attr("disabled","");

5) Удалить выбранный элемент

$("#my_select :selected").remove();

6) Удалить первый элемент

$("#my_select :first").remove();

7) Удалить последний элемент

$("#my_select :last").remove();

8) Удалить элемент, у которого value='2'

$("#my_select option[value='2']"). remove();
сокращенно:
$("#my_select [value='2']"). remove();

9) Очистить весь список <select>

$("#my_select").empty();
или:
$('option', $("#my_select")).remove();

10) Перебрать все элементы списка <select>

$('#my_select option').each(function(){
alert(this.text);
});

11) Сделать выбранным последний элемент

$("#my_select :last").attr("selected", "selected");

12) Сделать выбранным второй элемент

$("#my_select :nth-child(2)").attr("selected", "selected");

13) Сделать выбранным элемент, содержащий текст 'two'

$("#my_select :contains('two')").attr("selected", "selected");
или:
$("#my_select").find("option:contains('two')").attr("selected", "selected");
или только первое вхождение:
$("#my_select :contains('two')").first().attr("selected", "selected");
или:
$("#my_select").find("option:contains('two')").first().attr("selected", "selected");

14) Сделать выбранным элемент, value которого = 2

$("#my_select [value='2']").attr("selected", "selected");

15) Добавить элемент в начало списка <select>

$("#my_select").prepend( $('<option value="0">zero</option>'));

16) Добавить элемент в конец списка <select>

$("#my_select").append( $('<option value="4">four</option>'));

17) Добавить новый элемент после второго

$("#my_select option:nth-child(2)").after($('<option value="22">twotwo</option>'));

18) Количество элементов option в списке <select>

$("select[id=my_select] option").size();

19) Проверяем, выбран ли элемент в списке <select>

if($("#my_select").val())

20) Сделать все элементы в списке <select> не выбранными

$('#my_select option:selected').each(function(){
this.selected=false;
});

21) Добавить несколько элементов option в список <select> из массива

//добавим эти элементы несколькими способами
var newOptions = {
"key_1": "test 1",
"key_2": "test 2"
};
//способ 1
$.each(newOptions, function(key, value) {
$('#my_select').append($("", {
value: key,
text: value
}));
});
//способ 2
var new_options = '';
$.each(newOptions, function(key, value) {
new_options += '' + value + '';
});
$('#my_select').html(new_options);
//способ 3
var select = $('#my_select');
if(select.prop) {
var options = select.prop('options');
}
else {
var options = select.attr('options');
}
$.each(newOptions, function(val, text) {
options[options.length] = new Option(text, val);
});

На этом пока все.

Если что-то не упомянул, пишите в комментариях!

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 145, в среднем: 4.72 из 5)
Loading ... Loading ...


  1. #1 fred - Октябрь 4th, 2009 at 10:09

    во! пригодилось 18-е!
    Искал как посчитать количество элементов в списке…
    спасибо!

  2. #2 Dmitry - Январь 29th, 2010 at 21:23

    Есть вопрос относительно jQuery UI. А точнее его Dialog-а.
    Столкунляся с моментом, когда нажимаю на ссылку, открывается диалог, в куда предварительно методом load загружается форма с полем.

    из ссілки по которой щелкнул вынимаю контент и кладу в это поле в форме ну и показываю диалог.

    Все хорошо отрабатывает только один раз.

    Закрываю диалог, открываю по другой ссылке и все данные из сылки не передаются в форму диалога.

    Не в курсе в чем беда ?

    выглядит все достаточно просто.
    вот так выгружаю форму с контентом

    $(“.UnmountField”).live(“click”,function(){
    var oldvar = $(this).attr(“value”);
    var editor = $(“”).attr(‘id’, ‘editor’).load(“/cp/getPage/admin-edit-textarea.tpl”, {‘tpl’:'false’}, function(data){ $(“#name”).val( oldvar ); });

    И вот так открываю диалог
    editor.dialog( … );

    Тут ложу данные в поле формы диалога.
    Поле с Id=”name”.
    $(“#name”).val( oldvar );

    Проверял так, наличие возвращаемого контента из ссылки.

    alert ( oldvar );

    Контент есть, а форме диалога – не появляет больше одного раза.

    Спасибо.

  3. #3 nice - Январь 29th, 2010 at 22:02

    с jQuery UI почти не работаю, тяжелая библиотечка…

    а вот с вопросом, очень тяжело…. телепатия не развита и без всего кода понять очень сложно что куда и зачем…

    так что извини… не подскажу.

  4. #4 dima - Январь 31st, 2010 at 08:53

    спасибо, я как раз искал, я решил сделать: отправить это через json в скрипт там сформировать струтуру (встроенным фуцнкциями php) , вернуть обратно, и уже на клиенте просто перестроить форму…

  5. #5 Artyom - Май 21st, 2010 at 21:02

    how can I forbid multiselect property in list of elements, which is selectable

  6. #6 Sebastian - Июнь 28th, 2010 at 19:57

    Спасибо за памятку, пригодилось!

  7. #7 Dmitry Mashkov - Август 18th, 2010 at 10:31

    А как быть если нужно выбранный элемент поменять местами с предыдущим? к предыдущему можно обратиться по nth-child но мы же не знаем индекс…это получается нужно вызывать функцию each и методом сравнения узнать индекс текущего элемента. но это же нерационально, должен быть нормальный метод

  8. #8 Yuriy - Сентябрь 12th, 2010 at 09:53

    А мне сильно пригодилась банальная вещь – №15-16. Спасибо!

  9. #9 axel - Октябрь 6th, 2010 at 22:35

    а работает во всех браузерах нормально?

  10. #10 nice - Ноябрь 2nd, 2010 at 23:15

    По теории – да. Но не проверял.

  11. #11 Nataly - Ноябрь 10th, 2010 at 12:21

    А вы пробовали проверять выбран ли элемент списка вот так
    1. if( typeof $(‘select[@name=mySelect] option:selected’).text() === ‘undefined’ ){
    2. alert(‘Ни один элемент списка не выбран’);
    3. }
    Заработало?

  12. #12 nice - Ноябрь 10th, 2010 at 13:27

    а зачем так проверять?

  13. #13 diz - Ноябрь 15th, 2010 at 15:45

    СПС выручил,
    А я написал $(‘#order_type’).attr(‘value’) думаю чего не работает )))

  14. #14 akuba - Декабрь 10th, 2010 at 16:18

    Спасибо автору! Настольная книга просто

  15. #15 Director - Декабрь 31st, 2010 at 13:57

    Дякую мужик. Ледве знайшов цю інформацію. Зробив відмінний розсильщик спаму (підписка).

  16. #16 stur - Январь 8th, 2011 at 12:40

    а где же работа с событиями, onchange

  17. #17 nice - Январь 8th, 2011 at 12:52

    Если сильно надо, могу дописать :)

  18. #18 Арсен - Март 17th, 2011 at 19:30

    Автору спасибо! Отличная статья, регулярно обращаюсь.

  19. #19 Demon - Март 23rd, 2011 at 03:57

    Как раз то что искал!!! Пригодилось почти ВСЁ!
    Спасибо огромное.

  20. #20 zeloras - Апрель 7th, 2011 at 18:26

    Спасибо за статью, вы себе даже не представляете насколько она полезна) это прям карманный справочник :)
    Но вот у меня вопрос возник по поводу
    $(“#my_id :contains(‘text’)”).attr(“selected”, “selected”);
    Скажите пожалуйста, каким образом можно устроить проверку, т.е если есть text то true иначе false пробовал
    if (typeof $(“#my_id :contains(‘text’)”) !== undefined) {
    alert(“true”);
    }else{
    alert(“false”);
    }
    не помогло…

  21. #21 nice - Апрель 7th, 2011 at 23:37

    Спасибо всем за благодарности!

  22. #22 nice - Апрель 7th, 2011 at 23:45

    zeloras :

    Скажите пожалуйста, каким образом можно устроить проверку, т.е если есть text то true иначе false пробовал
    if (typeof $(«#my_id :contains(‘text’)») !== undefined) {
    alert(«true»);
    }else{
    alert(«false»);
    }
    не помогло…

    Если я правильно понял вопрос, то может так:

    if ($(“#my_select :selected”).text()==’text’) {
    alert(‘true’);
    }else{
    alert(‘false’);
    }

  23. #23 zeloras - Апрель 7th, 2011 at 23:51

    Не совсем, но благодаря вашей наводке, я понял
    if ($(“#chosetransfermethod :contains(‘MYTEXT’)”).val() != undefined) {
    true;
    }else{
    false
    }
    Вот так все работает без всяких проблем ;)

  24. #24 Лена - Апрель 14th, 2011 at 11:23

    А как сделать все элементы в списке невыбранными?

  25. #25 zeloras - Апрель 14th, 2011 at 21:34

    Лена :
    А как сделать все элементы в списке невыбранными?

    На мой взгляд, самый лучший вариант будет:

    $(“#my_select”).prepend( $(‘Please select’));

  26. #26 nice - Апрель 14th, 2011 at 22:00

    Лена :

    А как сделать все элементы в списке невыбранными?

    Спасибо за вопросик! Ответ я добавил 20 пунктом статьи!

  27. #27 nice - Апрель 14th, 2011 at 22:02

    zeloras :

    На мой взгляд, самый лучший вариант будет:

    $(«#my_select»).prepend( $(‘Please select’));

    Вариант… но это не решает поставленную задачу!

  28. #28 zeloras - Апрель 14th, 2011 at 23:09

    Насколько я помню each обрабатывает все эллементы,
    а что если сделать что то вроде

    $(‘#my_select option:selected’).each
    ?
    Насколько я помню в таком типе нельзя из меню выбрать более 1х варианта) так что смысл гонять цикл по всем опциям? :)

  29. #29 nice - Апрель 15th, 2011 at 09:29

    Согласен. Так оптимальней конечно!
    Спасибо, подправил… ;)

  30. #30 Oren - Апрель 16th, 2011 at 12:46

    nice :
    Если сильно надо, могу дописать :)

    Если можно… сильно надо.
    Очень помогла статья. Только начинаю разбираться с jQuery.
    А здесь просто золотая жила интересного материала.
    Огромное спасибо.

  31. #31 zeloras - Апрель 16th, 2011 at 22:30

    Oren :

    nice :
    Если сильно надо, могу дописать :)

    Если можно… сильно надо.
    Очень помогла статья. Только начинаю разбираться с jQuery.
    А здесь просто золотая жила интересного материала.
    Огромное спасибо.

    Присоединяюсь) еще хотелось бы увидеть столь же полезные статьи на данную тему)

  32. #32 nice - Апрель 17th, 2011 at 12:04

    stur :

    а где же работа с событиями, onchange

    Специально для всех желающих! http://www.webnotes.com.ua/index.php/archives/815

  33. #33 Oren - Апрель 20th, 2011 at 20:09

    Огромное спасибо!!!!!!

  34. #34 Андрей - Июнь 6th, 2011 at 16:58

    Спасибо автору! Мне очень помогла статья. Пункт 18-й я пробовал в таком виде
    $(‘#my_select option’).size();
    и у меня работает

  35. #35 zeloras - Июнь 11th, 2011 at 12:02

    Не подскажите как выбрать эллемент по value используя contains, а то вот понадобилось найти валуе image и сделать этот эллемент выбранным, но т.к у меня value идет такого типа: name:idname то не получается :(

  36. #36 Levik - Июль 17th, 2011 at 13:09

    спасибо! очень удобно – всё кратко и на одной странице!

  37. #37 nice - Июль 17th, 2011 at 16:48

    zeloras :

    Не подскажите как выбрать эллемент по value используя contains, а то вот понадобилось найти валуе image и сделать этот эллемент выбранным, но т.к у меня value идет такого типа: name:idname то не получается :(

    что-то не совсем понятно что нужно выбрать и почему не получается используя contains?

  38. #38 Alman - Сентябрь 21st, 2011 at 07:10

    помогите, никак не соображу.
    есть три селекта, два из которых скрыты. в зависимости от выбора в первом селекте необходимо показать второй либо третий селект.
    как реализовать?

  39. #39 zeloras - Сентябрь 24th, 2011 at 15:43

    Alman :
    помогите, никак не соображу.
    есть три селекта, два из которых скрыты. в зависимости от выбора в первом селекте необходимо показать второй либо третий селект.
    как реализовать?

    Случаем не это вам нужно? http://paste.org.ru/?1bzjae

  40. #40 panoptus - Октябрь 28th, 2011 at 05:17

    nice :

    Лена :

    А как сделать все элементы в списке невыбранными?

    Спасибо за вопросик! Ответ я добавил 20 пунктом статьи!

    Имхо, самый оптимальный вариант:
    $(#my_select option’).removeAttr(‘selected’);

  41. #41 Deniis - Ноябрь 1st, 2011 at 03:50

    tusen takk , pasiba sorry za translit

  42. #42 Jazz - Ноябрь 1st, 2011 at 17:13

    Добрый день, Интересует вопрос, как выбрать элемент не по value а по содержимому?
    тоесть:
    $(“#my_select :contains(‘two’)”).attr(“selected”, “selected”);
    этот пример работает, но не правильно. Он выбирает последний элемнт содержащий two.
    Тоесть если есть элемент two и two 2, то выберется two 2 а нужно two. Очень срочно нужно не могу решить(

  43. #43 mormon777 - Ноябрь 1st, 2011 at 22:00

    есть вопрос
    нужно в конструкции
    select
    сделать после загрузки документа выбраним 1 эл.
    $(document).ready(function(){
    $(“#my_select [value='1']“).attr(“selected”, “selected”);
    alert($(“#my_select”).val);
    });
    не работает
    выдает NULL

  44. #44 nice - Ноябрь 1st, 2011 at 23:07

    mormon777, а может нужно проверять так:
    alert($(«#my_select»).val()); ?

  45. #45 nice - Ноябрь 1st, 2011 at 23:19

    Jazz, можно попробовать так:
    $(“#my_select”).find(“option:contains(‘two’)”).first().attr(“selected”, “selected”);
    или:
    $(“#my_select :contains(‘two’)”).first().attr(“selected”, “selected”);

    Но это не решение проблемы, это просто выбрать первый попавший элемент под маску two.

    Хорошую задачку подкинули!

  46. #46 panoptus - Ноябрь 2nd, 2011 at 05:46

    Jazz, как на счет
    $(“#my_select :contains(‘two’)”).each(function(){
    if(this.html()==’two’)
    this.attr(«selected», «selected»);
    });

  47. #47 Jane - Ноябрь 3rd, 2011 at 09:45

    Вопрос. У меня в коде несколько селектов с разными id. Они получаются в цикле. Как мне получить id селекта, в котором выбрали опцию? Не id опции, а id самого селекта? Спасибо!

  48. #48 Jane - Ноябрь 3rd, 2011 at 10:20

    Вопрос снят. Придумала, как сделать =)

  49. #49 Jazz - Ноябрь 7th, 2011 at 21:33

    Спасибо за подсказки) проблему я решил в тот же день, буквально через 10 минут.
    Все просто:
    $(‘#select1 option[text=’qwe’).attr(“selected”, “selected”);

    Этот вариант был первый на уме, но почему-то не сработал сразу(видимо торопился). После перебора кучи дополнительных способов попробовал этот еще раз и все заработало)

  50. #50 nice - Ноябрь 7th, 2011 at 21:54

    Забавно! Сам хотел предложить этот вариант, но он и у меня не заработал ))) Видимо тоже где то тупанул.

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.