jQuery_jquery に基づいてドロップダウン ボックスを実装する

フラットでレスポンシブなレイアウトが人気の今日、ドロップダウン ボックスを実装するには jQuery を使用する必要があり、さらに美しくなります。 jQueryベースのドロップダウンボックスコード。

jQuery コード:

コードをコピーします コードは次のとおりです:

$(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) //選択されたオプションを取得します
$options.appendTo('#select2'); }); $('#select2').dblclick(function(){
var $options = $("option:selected",this) //選択されたオプションを取得します
$options.appendTo('#select1'); }); });


HTML コード:





コードをコピー


コードは次のとおりです:

  

  

      
           选项1
           选项2
           选项3
           选项4
           选项5
           选项6
           选项7
           选项8
       選択>
      

           右边に中追加>

           右边に全部追加>
      

  

  

      
       選択>
      

          

          
      

  

は非常に単一ではありませんが、必要な小さな付属品を直接リスト内で使用できます。