在下拉列表中交换元素

Question

如何从下拉列表中交换元素，例如当我悬停并在下拉列表中选择第二个元素时，第一个元素显示为第二个元素。我无法做到这一点。我正在使用ul li html如果其他选项请告诉我。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>