Heim > Web-Frontend > js-Tutorial > JQuery 操作select标签实现代码_jquery

JQuery 操作select标签实现代码_jquery

WBOY
Freigeben: 2016-05-16 18:27:17
Original
1197 Leute haben es durchsucht

下面几个常用的代码或许对您有帮助:

复制代码 代码如下:

//1.获取选中option值
$('#selectList').val();
//2.获取选中option的文本
$('#selectList :selected').text();
//3.获取多个选中option值、文本
var foo = [];
$('#multiple :selected').each(function(i, selected) {
foo[i] = $(selected).text();
});
// to get the selected values, just use .val() - this returns a string or array
foo = $('#multiple :selected').val();
//4.使用选项option的条件表达式
switch ($('#selectList :selected').text()) {
case 'First Option':
//do something
break;
case 'Something Else':
// do something else
break;
}
//5.删除某个value=2的option
$("#selectList option[value='2']").remove();
//6.从list A 移动option到 list B.
// here we have 2 select lists and 2 buttons. If you click the “add” button,
// we remove the selected option from select1 and add that same option to select2.
// The “remove” button just does things the opposite way around.
// Thanks to jQuery's chaining capabilities, what was once a rather tricky undertaking with JS can now be done in 6 lines of code.
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').appendTo('#select1');
});
});

如果您不了解JQuery,可以先看它的文档

希望这篇POST对您有帮助。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage