Вступление
Манипулирование блоком выбора в jQuery требует дополнительных навыков и взаимодействия, но это не так сложно. Эта статья поможет вам разобраться с полями выбора без каких-либо проблем.
Выберите Создание коробки
Это должно быть просто и очень прямо вперед.
jQuery('#some_element').append(' ');
jQuery('#some_element').append(' ');
Обновление 01/06/2011 — 3 различных способа выбора опции выбора.
//select select box option jQuery('#selectboxid option').attr('selected', true); jQuery('#selectboxid option').attr('selected', selected); $("#selectboxid").attr('selectedIndex', indexnumber);
Выберите опцию Box с помощью jQuery
Вот код для добавления опции в поле выбора. Просто вставьте его и отредактируйте некоторые его части в соответствии с вашими потребностями.
//obj is the list of option values function(obj) { var create = ' '; for(var i = 0; i '+obj[i]+''; } create += ' '; jQuery('#some_element').append(create); }
//obj is the list of option values function(obj) { var create = ' '; for(var i = 0; i '+obj[i]+''; } create += ' '; jQuery('#some_element').append(create); }
Кроме того, вы можете создать параметры в списке элементов и добавить его в чистом jQuery.
function(id, obj) { jQuery('#some_element').append(' '); jQuery.each(obj, function(val, text) { jQuery('#'+id).append( jQuery('
function(id, obj) { jQuery('#some_element').append(' '); jQuery.each(obj, function(val, text) { jQuery('#'+id).append( jQuery('
«); for (var i = 0; i '+ obj [i] +' Получение значения в поле выбора Возможно, нам понадобится узнать текущее значение выбранного параметра. [JS] // # selectbox - идентификатор окна выбора jQuery ('опция # selectbox: selected'). val (); [code lang = "js"] Вы можете получить текст опции, сделав это.
// # selectbox — идентификатор окна выбора
jQuery («опция # selectbox: selected»). text ();
// # selectbox — идентификатор окна выбора
$ («# SelectList option [value = ‘thisistheone’]»). Text ();
// # selectbox — идентификатор окна выбора
$ («Опция # selectList: first»). Text ()
// # selectbox — идентификатор окна выбора
$ («Опция # selectList: eq (3)»). Text ()
// # selectbox — идентификатор окна выбора
$ («Опция # selectList: нет (опция: первая, опция: последняя)»). Each (function () {
$ (Это) .text ();
});
[/ См]
Получение нескольких значений в поле выбора
Получить несколько значений с помощью этого кода.
jQuery('#some_element:selected').each(function(){ alert(jQuery(this).text()); alert(jQuery(this).val()); }); var current = []; jQuery('#some_element:selected').each(function(index, selectedObj){ current[index] = $(selectedObj).text(); }); var foo = jQuery('#multiple :selected').map(function(){return jQuery(this).val();}).get();
Удалить элемент в поле выбора
Здесь нет ничего особенного. Просто вставьте этот код и измените его, чтобы элемент, который будет удален, был выбран вами.
jQuery('#selectbox: selected').remove(); Here we will remove all elements except the first and last one. //#selectbox is the id of the select box $("#selectbox option:not(option:first, option:last)").remove();
Выбор опции в поле выбора
Сделайте это, чтобы выбрать опцию в поле выбора.
jQuery('#selectbox option').attr('selected', 'selected');
Отменить выбор
Сторнирование кода выше
jQuery('#selectbox option').attr('selected', false);
Событие onChange находит скрытый параметр
$('#selectbox').change(function(){ var val = $(this).find('option:selected').text(); alert('i selected: ' + val); }); onchange find select box selected items. $('#selectbox').change(function(){ $(this).find('option:selected').each(function () { alert('i selected: ' + $(this).text()); } });
Вывод
Если вы правильно выполнили все шаги, вы должны добиться цели. Как видите, это не так сложно!
Источник:
http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/