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 (голосов 131, в среднем: 4.70 из 5)
Loading ... Loading ...

полотенца оптом дешево

  1. #1 viktor - Декабрь 27th, 2015 at 13:16

    echo “”;

    $i = 1;
    while ($i <= 31) {
    echo "$i”;
    $i++;
    }
    echo “”;

    подскажите пожалуста как мне сделать выбраный элемент который я сахранил и он в дальнейшем отображался

  2. #2 Vetal - Апрель 2nd, 2016 at 12:47

    .attr(“selected”, “selected”); – уже не актуально, как минимум для хрома.
    .prop(‘selected’, true); – для выбора используйте это!

    Хорошо когда все в одном месте собрано, но этот момент создал много проблем! Исправьте!

  3. #3 erid - Май 10th, 2016 at 10:35

    20 – (11 | 12 | 13 | 14)
    заменить на
    $(‘.class_selector’).val(search_value).change();

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.