如何將無序列表轉換成 <select>使用jQuery下拉菜單？

Question

如何轉換這種格式的無序列表

 <ul class="selectdropdown"> <li><a href="one.html" target="_blank">one</a></li> <li><a href="two.html" target="_blank">two</a></li> <ul> <li><a href="twoOne.html" target="_blank">two One</a></li> <ul> <li><a href="twoOneOne.html" target="_blank">two One One</a></li> </ul> <li><a href="twoTwo.html" target="_blank">twoTwo</a></li> </ul> <li><a href="three.html" target="_blank">three</a></li> <li><a href="four.html" target="_blank">four</a></li> <li><a href="five.html" target="_blank">five</a></li> <li><a href="six.html" target="_blank">six</a></li> <li><a href="seven.html" target="_blank">seven</a></li> </ul> 

我想將此結構轉換為<select>結構

Answer 1

jQuery代碼

  jQuery('.selectdropdown li a').each(function() {
        var el = jQuery(this);
        jQuery('<option />', {
            "value"   : el.attr('href'),
            "text"    : el.text()
        }).appendTo('#top select');
    });
    if (jQuery('.selectdropdown li a').length < 1) jQuery('#top').hide();

    jQuery('#top').find('select').change(function() {
        window.location = jQuery(this).find('option:selected').val();
    });

HTML

<div id="top">
<select></select>
</div>

這里是小提琴小提琴鏈接

Answer 2

嘗試這樣的事情：

 ul.dark_menu { list-style: none; padding: 5px 1px; font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif; font-weight: 200; font-size: 16px; letter-spacing: 0.01em; font-smooth: always; color: #000000; line-height: 15px; margin: auto; width: 1018px; position: relative; background: #2B5797; }/* Blog johanes djogzs.blogspot.com */ ul.dark_menu:after { content: ""; clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;} ul.dark_menu li { float: left; position: relative; margin: 1px;} /* Blog johanes djogzs.blogspot.com */ ul.dark_menu li a, ul.dark_menu li a:link { color: #fafafa; text-decoration: none; display: block; padding: 8px 26px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; }/* Blog johanes djogzs.blogspot.com */ ul.dark_menu li a:hover { color: #fafafa; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }/* Blog johanes djogzs.blogspot.com */ ul.dark_menu li a.selected { border-right: 1px solid #ddd; text-transform: uppercase; margin-left: 10px; } ul.dark_menu li a.selected, ul.dark_menu li a:active { color: #fafafa; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} ul.dark_menu li ul { display: none; }/* Blog johanes djogzs.blogspot.com */ ul.dark_menu li ul:before { content: " "; position: absolute; display: block; z-index: 1500; left: 0; top: -10px; height: 10px; width: 100%;} ul.dark_menu li ul {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;top:55px;} ul.dark_menu li:hover ul { position: absolute; display: block; z-index: 1000; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); left: 0;border-radius: 0px 0px 5px 5px; top: 37px; padding: 5px 0; list-style: none; background: #fff; }/* Blog johanes djogzs.blogspot.com */ ul.dark_menu li ul li { float: none; margin:0px;} ul.dark_menu li ul li:first-child { margin:0px; border-top: 0 none;} ul.dark_menu li ul li:last-child { border-bottom: 0 none; }/* Blog johanes djogzs.blogspot.com */ ul.dark_menu [data-role="dropdown"] > a::before { position: absolute; content: "^"; display: block; font-size: 15px; left: 100%; margin-left: -20px; top: 10px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } ul.dark_menu li ul li a, ul.dark_menu li ul li a:link { color: #222; display: block; background: transparent none; padding: 10px 25px 10px 25px; white-space: nowrap;} ul.dark_menu li ul li a:hover { background:#2D89EF;-moz-transition: all 0.1s ease-in-out;color:#fff; -webkit-transition: all 0.1s ease-in-out; }/* Blog johanes djogzs.blogspot.com */ .menujohanes{position:relative;} #search input[type="text"]:hover {width:848px;} #search input[type="text"] { background: #fff url("http://3.bp.blogspot.com/-uYZni0pIn-E/T-xY2vVu_-I/AAAAAAAACUY/ZMfR3_BvRFE/s1600/SEARCH_32x32-32.png")no-repeat center left; font-size: 13px; color: #222; width: 0px; padding: 10px 0px 11px 35px; z-index: 9; border: 1px solid #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; margin-bottom: -1px; position: absolute; top: 0px; right:27px;} #main4, #main5, #main6 { width: 303px; list-style-type: none; float: left; margin: 10px;} .main3 {width:305px; list-style-type: none; padding-top: 10px; float: left;} ::-webkit-scrollbar { height:12px; background: #474747;} ::-webkit-scrollbar-thumb { background-color: #000; } li#sub ul { display:none; position: absolute; left: 100%; top:0; } li#sub:hover ul{ display: block; } 

 <div class='menujohanes'> <ul class='dark_menu'> <li data-role='dropdown'> <a href='#'> Categories </a> <ul> <li id='sub'> <a href='#'> Lorem ipsum </a> <ul> <li> <a href='#'> Categories2 </a></li><li> <a href='#'> Categories3 </a></li> </ul> </li> <li> <a href='#'> Lorem ipsum </a> </li> <li> <a href='#'> Lorem ipsum </a> </li> <li> <a href='#'> Lorem ipsum </a> </li> <li> <a href='#'> Download </a> </li> <li> <a href='#'> Lorem ipsum </a> </li> </ul> </li> </ul> <form action='/search' id='search' method='get'> <input name='q' placeholder='Search Somethings..' size='40' type='text'/> </form> </div> 

從這里獲得幫助：

Answer 3

我最近創建了這樣的內容，請查看：

 <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#dropdownSelect").click(function(){ $("#multiSelect").slideToggle("fast"); }); }); </script> <style> #dropdownSelect{ cursor:pointer; color:#000; padding:7px 20px; width:400px; } #dropdownSelect p{ background: #eee; width:400px; } #multiSelect{ display:none; height:150px; background:#ccc; z-index:1; overflow:auto; position:absolute; width:400px; color:#000; top:60px; left:28px; } #multiSelect ul { list-style:none; text-decoration:none; padding-left:10px; } #multiSelect li>ul{ list-style:none; text-decoration:none; padding-left: 10px; cursor:pointer; } </style> </head> <body> <dl> <dt id="dropdownSelect"> <p>Choose</p> </dt> <dd> <div id="multiSelect"> <ul> <li>Link-1</li> <li>Link-2</li> <li>Link-3</li> </ul> </div> </dd> </dl> </body> 

Answer 4

有一個非常方便的插件，它將您的select元素轉換為無序列表。 我一直都用它，因為它既性感又快速。

http://code.octopuscreative.com/fancyselect/