Heim >
Artikel > Web-Frontend > Implementieren Sie ein Dropdown-Feld basierend auf jQuery_jquery
Implementieren Sie ein Dropdown-Feld basierend auf jQuery_jquery
WBOYOriginal
2016-05-16 16:30:321266Durchsuche
Heutzutage stoßen wir in Projekten häufig auf Dropdown-Boxen, da flache und reaktionsfähige Layouts sehr beliebt sind. Die Verwendung von jQuery ist außerdem viel schöner. Hier ist ein Teil von jQuery-basiertem Drop-Down-Box-Code.
$(function(){
$('#add').click(function(){
var $options = $('#select1 option:selected');
$options.appendTo("#select2");
});
$('#remove').click(function(){
var $options = $('#select2 option:selected');
$options.appendTo("#select1");
});
$('#add_all').click(function(){
var $options = $('#select1 option');
$options.appendTo("#select2");
});
$('#remove_all').click(function(){
var $options = $('#select2 option');
$options.appendTo("#select1");
});
$('#select1').dblclick(function(){
var $options = $("option:selected",this); //Ausgewählte Option abrufen
$options.appendTo('#select2');
});
$('#select2').dblclick(function(){
var $options = $("option:selected",this); //Ausgewählte Option abrufen
$options.appendTo('#select1');
});
});
HTML-Code:
Code kopieren
Der Code lautet wie folgt:
选中添加到右边>>
全部添加到右边>>
<<选中删除到左边
<<全部删除到左边
是不是很简单?小伙伴们需要的话直接就可以拿到项目中使用了.
Stellungnahme:
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