Vertauschen Sie die Elemente im Dropdown-Menü

Question

Wie Sie das Element aus dem Dropdown-Menü tauschen, z. B. wenn ich den Mauszeiger drücke und das zweite Element im Dropdown-Element auswähle, zeige das zweite Element an der richtigen Stelle an. Ich kann das nicht. Ich benutze ul li html, wenn andere Option, lass es mich wissen.

$('#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

Zum Beispiel .prependTo() Verfahren verwendet wird, wenn es das ist, was Sie

$('#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>