在下拉菜單中交換元素

Question

如何從下拉菜單中交換元素，例如，當我將鼠標懸停並選擇下拉第一個元素中的第二個元素時，顯示第二個元素。我無法做到這一點。我正在使用UL LI HTML如果其他選項請讓我知道。

$('#selectUl li:not(":first")').addClass('unselected'); 
 
$('#selectUl').hover(
 
    function(){ 
 
     $(this).find('li').click(
 
      function(){ 
 
       $('.unselected').removeClass('unselected'); 
 
       $(this).siblings('li').addClass('unselected'); 
 
\t \t \t \t 
 
       var index = $(this).index(); 
 
       $('select[name=size]') 
 
        .find('option:eq(' + index + ')') 
 
        .attr('selected',true); 
 
\t \t \t \t \t 
 
      }); 
 
    }, 
 
    function(){ 
 
    });

ul { 
 
    width: 8em; 
 
    line-height: 2em; 
 
} 
 

 
li { 
 
    display: list-item; 
 
    width: 100%; 
 
    height: 2em; 
 
    border:1px solid #ccc; 
 
    border-top-width: 0; 
 
    text-indent: 1em; 
 
} 
 
li:first-child { 
 
    border-top-width: 1px; 
 
} 
 

 
li.unselected { 
 
    display: none; 
 
} 
 
ul#selectUl:hover li, 
 
ul#selectUl:hover li.unselected { 
 
    display: list-item; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul id="selectUl"> 
 
    <li>small</li> 
 
    <li>large</li> 
 
</ul>

Answer 1

例如使用.prependTo()方法，如果這是你的意思

$('#selectUl li').click(function(){ 
 
    $(this).prependTo('#selectUl'); 
 
    $('#selectUl').removeClass('hoverable'); 
 
    // escape js event loop and give hoverable class back 
 
    setTimeout(function() {$('#selectUl').addClass('hoverable');}, 1); 
 
});

ul { 
 
    width: 8em; 
 
    list-style-type: none; 
 
    line-height: 2em; 
 
} 
 

 
li { 
 
    display: list-item; 
 
    width: 100%; 
 
    height: 2em; 
 
    border:1px solid #ccc; 
 
    border-top-width: 0; 
 
    text-indent: 1em; 
 
} 
 
li:first-child { 
 
    border-top-width: 1px; 
 
} 
 

 
ul#selectUl li { display: none; } 
 
ul#selectUl li:first-child { display: list-item; } 
 
ul#selectUl.hoverable:hover li { display: list-item; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul id="selectUl" class="hoverable"> 
 
    <li>small</li> 
 
    <li>medium</li> 
 
    <li>large</li> 
 
</ul>