我可以使用ul li而不是select dropdown和jquery使它成为表单的一部分吗？

我花了很长时间尝试重写选择到ul li并相应地设置它。 但是我对代码的重量和路上的小麻烦感到非常恼火。

所以我想完全抛弃这个想法，只需使用正常的ul li菜单和某种javascript使其function像select（表单提交等）。

这可能吗？ 您可以给我的任何示例代码？

我担心的是跨浏览器兼容性。

Answer 1

可爱的主意。 我只是在小提琴中做了一个，在这里检查一下 。

HTML

 
[SELECT]
 
Option 1
 
Option 2
 
Option 3
  

JAVASCRIPT

 $("ul").on("click", ".init", function() { $(this).closest("ul").children('li:not(.init)').toggle(); }); var allOptions = $("ul").children('li:not(.init)'); $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); }); 

CSS

 ul { height: 30px; width: 150px; border: 1px #000 solid; } ul li { padding: 5px 10px; z-index: 2; } ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } li.init { cursor: pointer; } a#submit { z-index: 1; } 

Answer 2

选择replacemenet的基本思路是这样的。 它生成基本的html和事件绑定，然后你可以用css设置它。 看看这个。 http://jsfiddle.net/elclanrs/H63MU/

 var ulSelect = function($select) { // $select.hide(); <-- Uncomment in production var $opts = $select.find('option'); return (function() { var items = '', html = ''; $opts.each(function() { items += '
'+ $(this).text() +'
'; }); html = '
'+ '
'+ ''+ $opts.filter(':selected').text() +'' + '
' + items + '
'+ '
'+ '
'; $(html) .find('.sub a') .click(function(e) { // You can attach more events... e.preventDefault(); var $this = $(this); $this.parents('.menu').find('.sel').text($this.text()); $opts.eq($this.parent().index()).prop('selected', true); }).end().insertAfter($select); }()); }; ulSelect($('#select')); 

Answer 3

该插件网站已关闭，但Google为我提供了此链接 。 这是另一个列出几个下拉菜单的页面 。

Answer 4

要完全按照列表​​和javascript进行操作并不是最好的主意，因为没有javascript的每个人都无法使用此function。

这是一个jQuery实现，它具有常规表单选择回退（实际上它映射了现有的选择）。 您只需要更改第一个选择器并设置列表样式…脚本完成剩下的工作。

 jQuery( '.woocommerce-ordering select' ).each( function() { var target = jQuery( this ); var selected = target.find( 'option:selected' ).text(); var map = jQuery( '
' + selected + '
' ).insertAfter( target ); target.hide(); target.find( 'option' ).each( function() { var c = jQuery( this ); var u = map.find( 'ul' ); console.log( u ); console.log( c.text() ); jQuery( '
' + c.text() + '
' ).appendTo( u ); } ); map.find( 'li' ).click( function() { map.find( 'span' ).text( jQuery( this ).text() ); target.val( jQuery( this ).attr( 'data-value' ) ).trigger( 'change' ); } ); } );