jQuery - управление элементом select
Элемент select позволят осуществлять пользавателю выбор из списка необходимую опцию или несколько опций в случае множественного выбора. Довольно часто необходимо управлять элементом select в динамике. Здесь я привожу некоторые шпаргалки по управлению элементом с помощью библиотеки jQuery.
Для начала создадим html элемент select с набором опций option с тестовыми значениями.
HTML
<select id="tema" style="width: 70px;">
<option value="html">HTML</option>
<option value="php">PHP</option>
<option value="js">JS</option>
<option value="jquery" selected>jQuery</option>
<option value="css">CSS</option>
</select>Получаем значение value, выбранной опции элемента select:
JS
$('#tema').val(); // jqueryПолучаем текст, выбранной опции элемента select:
JS
$('#tema option:selected').text(); // jQueryДелаем элемент select недоступным и наоборот.
JS
//Удаление выбранной опции option элемента select
$("#tema :selected").remove();
//Удаление первой опции option элемента select
$("#tema :first").remove();
//Удаление последний option элемента select
$("#tema :last").remove();
//Удаление option у которого value='html' из списка элемента select
$("#tema option[value='html']").remove();
$("#tema [value='html']").remove(); // сокращенно
//Удаление всех option элемента select
$("#tema").empty();Удаление опции option из элемента select.
JS
//Удаление выбранной опции option элемента select
$("#tema :selected").remove();
//Удаление первой опции option элемента select
$("#tema :first").remove();
//Удаление последний option элемента select
$("#tema :last").remove();
//Удаление option у которого value='html' из списка элемента select
$("#tema option[value='html']").remove();
$("#tema [value='html']").remove(); // сокращенно
//Удаление всех option элемента select
$("#tema").empty();Перебрать и вывести все option из списка select в блок с id="result":
JS
var result = "";
$('#tema option').each(function(){
result = result + this.text + "<br/>";
});
$('div#result').html(result);Выбрать option из списка select
В коде ниже показано как выбрать последний, второй option в списке select, и как выбрать option в select по находящимуся в нём тексте (варианты с учётом регистра и нет).
JS
//Выбрать последний option в списке select
$("#tema :last").attr("selected", "selected");
//Выбрать второй option в списке select
$("#town :nth-child(2)").attr("selected", "selected");
//Выбрать опцию содержащую текст 'PHP'
//Первый вариант
$("#tema :contains('PHP')").attr("selected", "selected");
// Второй вариант
$("#tema").find("option:contains('PHP')").attr("selected", "selected");
// Третий вариант (не зависит от регистра)
var opt = $('#tema option');
opt.each(function(indx, element){
if ( $(this).text().toLowerCase() == 'PHP'.toLowerCase() ) {$(this).attr("selected", "selected");}
});Выбрать option из списка select по значению value
JS
$("#tema option[value='CSS']").attr("selected", "selected");Добавление опций option в список select
JS
//Добавить элемент в начало списка <select>:
$("#tema").prepend( $('<option value="mysql">MySql</option>') );
//Добавить элемент в конец списка <select>:
$("#tema").append( $('<option value="mysql">MySql</option>'));
//Добавить новый элемент после третьего:
$("#tema option:nth-child(3)").after( $('<option value="mysql">MySql</option>') );Добавление нескольких опций option в список select из массива
JS
var newOptions = {
"Ryaza": "Рязань",
"Samara": "Самара"
};
$.each(newOptions, function(key, value) {
$('#town').append($("", {
value: key,
text: value
}));
});Узнать количиство option в список select
JS
$("select[id=town] option").size();Проверка - выбран ли option в список select
JS
if ( $("#town").val() ) {
//Ваш код
}Отмена выбора всех option в список select
JS
$('#town option:selected').each(function(){
this.selected=false;
});Дата публикации:
ТОП 10 случайных публикаций
Последние публикации
Сайт разработан студией © WEB-VidST