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();

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");

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списке <select>

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

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

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

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 4, в среднем: 5.00 из 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

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

(will not be published)

Spam Protection by WP-SpamFree

  1. No trackbacks.