jQuery работа с select

Distructor
Администратор
Очень часто приходится сталкиваться с обработкой выпадающих 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())
 ...
Источник: http://www.webnotes.com.ua/index.php/archives/699
Вернуться к началу
  • Непрочитанное сообщение
Distructor
Администратор
Сортировка элементов в списке (sort options in select)

В примере рассмотрена как сортировка по ключу (то, что передается), так и по значению (то, что отображается пользователю).

Код: Выделить всё

<html>
<head>
    <title>Сортировка элементов в списке</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <meta http-equiv="Content-type" content="text/html; charset=cp1251" />
    <script type="text/javascript">
        function doSortSelect ( select_id )
        {
            var sortedVals = $.makeArray($('#'+select_id+' option')).sort(function(a,b){
                return $(a).text() > $(b).text() ? 1 : $(a).text() < $(b).text() ? -1 : 0 ;
            });
            $('#'+select_id).empty().html(sortedVals);
        }
        function doSortSelectByValue ( select_id )
        {
            var sortedVals = $.makeArray($('#'+select_id+' option')).sort(function(a,b){
                return $(a).attr('value') > $(b).attr('value') ? 1 : $(a).attr('value') < $(b).attr('value') ? -1 : 0 ;
            });
            $('#'+select_id).empty().html(sortedVals);
        }
    </script>
</head>
<body>

<select id="select_id_name" multiple size="6">
  <option value="10">BBBBBBBBBBBBB</option>
  <option value="50">AAAAAAAAAAAAA</option>
  <option value="12">DDDDDDDDDDDDD</option>
  <option value="20">CCCCCCCCCCCCC</option>
</select>


<br />
<a href="#" onclick="doSortSelect('select_id_name');return false;" >отсортировать по значению</a><br />
<a href="#"button onclick="doSortSelectByValue('select_id_name');return false;" >отсортировать по ключу</a>


<br /><br /><a target="_black" href="http://coder.v-tanke.ru/viewtopic.php?t=560" >Перейти к статье "jQuery Работа с select"</a>
</body>
</html>
Вернуться к началу
  • Непрочитанное сообщение

Вернуться в «jQuery»