javascript - llenar - ¿Cómo convertir una lista desordenada en un menú desplegable<select> con un estilo agradable usando jquery?

menu desplegable javascript

Question

¿Cómo convierto una lista desordenada en este formato?

<ul class="selectdropdown">
<li><a href="one.html" target="_blank">one</a></li>
<li><a href="two.html" target="_blank">two</a></li>
<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>

en un menú desplegable en este formato

<select>
<option value="one.html" target="_blank">one</option>
<option value="two.html" target="_blank">two</option>
<option value="three.html" target="_blank">three</option>
<option value="four.html" target="_blank">four</option>
<option value="five.html" target="_blank">five</option>
<option value="six.html" target="_blank">six</option>
<option value="seven.html" target="_blank">seven</option>
</select>

usando jQuery?

Editar: Al seleccionar una entrada de la selección / lista desplegable, el enlace se abrirá en una nueva ventana o pestaña automáticamente. También quiero poder diseñarlo como: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Answer 1

Esta solución funciona también en IE y trabaja con el elemento seleccionado (en la etiqueta de anclaje).

$(''ul.selectdropdown'').each(function(){
var list=$(this),
select=$(document.createElement(''select'')).insertBefore($(this).hide()).change(function(){
window.location.href=$(this).val();
});
$(''>li a'', this).each(function(){
var option=$(document.createElement(''option''))
.appendTo(select)
.val(this.href)
.html($(this).html());
if($(this).attr(''class'') === ''selected''){
option.attr(''selected'',''selected'');
}
});
list.remove();
});

Answer 2

Gracias a todos por publicar los códigos. Mi escenario es similar, pero mi situación es para la capacidad de respuesta de que para x-size cambiaría a una lista desplegable, y si no es x-size, usar csswatch para verificar las propiedades de "visualización" de un elemento que tiene cierta cantidad de ancho establecida a ella (por ejemplo: 740px). Pensé en compartir esta solución para cualquiera que esté interesado. Esto es lo que he combinado con los códigos de Tatu. En lugar de reemplazar el html, creé, luego oculté el nuevo html y luego solo los agregué cuando sea necesario:

var $list = $(''ul.list'');
(listFunc = function(display){
//Less than x-size turns it into a dropdown list
if(display == ''block''){
$list.hide();
if($(''.sels'').length){
$(''.sels'').show();
} else {
var $select = $(''<select class="sels" />'');
$list.find(''a'').each(function() {
var $option = $(''<option />'');
$option.attr(''value'', $(this).attr(''href'')).html($(this).html());
$select.append($option);
});
$select.insertAfter($list);
$(''.sels'').on(''change'', function(){
window.location = this.value;
});
}
} else {
$(''.sels'').hide();
$list.show();
}
})(element.css(''display''));
element.csswatch({
props: ''display''
}).on(''css-change'', function (event, change) {
return listFunc(change.display);
});

Answer 3

Recientemente he creado una solución donde la ul se transforma, imita casi por completo la selección.

Además, tiene una búsqueda de las opciones de selección y es compatible con el estado activo. Simplemente agregue una clase con el nombre activo y esa opción será seleccionada.

Maneja la navegación del teclado.

Echa un vistazo al código aquí: Código GitHub

Y un ejemplo vivo aquí: Ejemplo de código

La lista no ordenada debe estar en la forma:

<ul id="...">
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a class="active" href="...">...</a></li>
...
</ul>

Para convertir la ul para seleccionar simplemente llamar:

$(window).on("load resize", function() {
ulToSelect($("ul#id"), 767);
});

Donde #id es un id para la lista desordenada y 767 es el ancho mínimo de la ventana para que se realice la conversión. Esto es muy útil si desea que la conversión se realice solo para dispositivos móviles o tabletas.

Answer 4

$(''ul.selectdropdown'').each(function() {
var select = $(document.createElement(''select'')).insertBefore($(this).hide());
$(''>li a'', this).each(function() {
var a = $(this).click(function() {
if ($(this).attr(''target'')===''_blank'') {
window.open(this.href);
}
else {
window.location.href = this.href;
}
}),
option = $(document.createElement(''option'')).appendTo(select).val(this.href).html($(this).html()).click(function() {
a.click();
});
});
});

En respuesta a tu último comentario , lo modifiqué un poco pero no lo he probado. Házmelo saber.

$(''ul.selectdropdown'').each(function() {
var list = $(this), select = $(document.createElement(''select'')).insertBefore($(this).hide());
$(''>li a'', this).each(function() {
var target = $(this).attr(''target''),
option = $(document.createElement(''option''))
.appendTo(select)
.val(this.href)
.html($(this).html())
.click(function(){
if(target===''_blank'') {
window.open($(this).val());
}
else {
window.location.href = $(this).val();
}
});
});
list.remove();
});

Answer 5

$(function() {
$(''ul.selectdropdown'').each(function() {
var $select = $(''<select />'');
$(this).find(''a'').each(function() {
var $option = $(''<option />'');
$option.attr(''value'', $(this).attr(''href'')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
});

EDITAR

Al igual que con cualquier código jQuery que desea ejecutar en la carga de la página, tiene que envolverlo dentro de $(document).ready(function() { ... }); bloque, o dentro de su versión más corta $(function() { ... }); . Actualicé la función para mostrar esto.

EDITAR

También hubo un error en mi código, intenté tomar href del elemento li.