我可以使用 ul li 而不是选择下拉列表并使用 jquery 使其成为表单的一部分吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9716212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
can I use ul li instead of select dropdown and with jquery make it part of a form?
提问by Starx
I went really long way trying to rewrite select to ul li and style it accordingly. But I'm getting really annoyed with the weight of code and minor annoyances on the way.
我花了很长时间试图将 select 重写为 ul li 并相应地设置样式。但是我对代码的重量和途中的小烦恼感到非常恼火。
So I'm thinking to ditch the idea completely, and just use normal ul li menu and some kind of javascript to make it function like select (for form submission etc).
所以我想完全放弃这个想法，只使用普通的 ul li 菜单和某种 javascript 使其功能像 select （用于表单提交等）。
So is this possible? any example code you can give me?
那么这可能吗？你可以给我任何示例代码吗？
My concerns is Cross browser compatibility.
我担心的是跨浏览器兼容性。
回答by Starx
Lovely idea. I just made one in the fiddle check it out here.
好主意。我刚刚做了一个小提琴检查在这里。
HTML
HTML
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>
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
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; }
回答by elclanrs
The basic idea for select replacemenet is this. It generates the basic html and event binding and then you can just style it with css. Check it out. http://jsfiddle.net/elclanrs/H63MU/
select 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 += '<li><a href="#" class="item">'+ $(this).text() +'</a></li>';
});
html =
'<ul class="menu">'+
'<li class="sub">'+
'<a class="sel" href="#">'+ $opts.filter(':selected').text() +'</a>' +
'<ul>' + items + '</ul>'+
'</li>'+
'</ul>';
$(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'));
回答by GDY
To completely do it as list and with javascript is not the best idea because everyone that has no javascript cannot use this functionality.
完全按照列表并使用 javascript 来完成它并不是最好的主意，因为没有 javascript 的每个人都无法使用此功能。
Here is a jQuery implementation that has the regular form select fallback (In fact it maps a existing select). You just need to change the first selector and style the list ... the script does the rest.
这是一个具有常规表单选择回退的 jQuery 实现（实际上它映射了一个现有的选择）。您只需要更改第一个选择器并设置列表样式……剩下的由脚本完成。
jQuery( '.woocommerce-ordering select' ).each( function() {
var target = jQuery( this );
var selected = target.find( 'option:selected' ).text();
var map = jQuery( '<div class="selectmap"><span>' + selected + '</span><ul class="selectmap"></ul></div>' ).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( '<li data-value="' + c.attr( 'value' ) + '">' + c.text() + '</li>' ).appendTo( u );
} );
map.find( 'li' ).click( function() {
map.find( 'span' ).text( jQuery( this ).text() );
target.val( jQuery( this ).attr( 'data-value' ) ).trigger( 'change' );
} );
} );
