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 コード:





コードをコピー


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

  

  

       <複数選択 id="select1" style="幅: 100px;高さ: 160px;">
           选项1
           选项2
           选项3
           选项4
           选项5
           选项6
           选项7
           选项8
      
      

           右边に中追加>

           右边に全部追加>
      

  

  

       <複数選択 id="select2" style="width: 100px;height: 160px;">
      
      

           <<<选中删除到左边

           <<全部删除到左边
      

  

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