我需要创建自定义样式的选择下拉菜单（有三个）表单输入。我已经使用 jquery 来完成此操作，因为我不知道在 CSS 中执行此操作的好方法。我遇到的问题是，尽管弄乱了各种元素的 z-index，但菜单的下拉菜单却落后于其他表单输入。我已经查看了每个问题的答案： 为什么下拉菜单隐藏在 jQuery 按钮后面？（基本上是我遇到的确切问题 - 没有找到好的解决方案） 下拉隐藏在横幅按钮后面
但是，这些解决方案似乎对我不起作用。您可以在此处查看问题的工作版本：http: //jsfiddle.net/SANdM/5/
这是选择代码（其中有 3 个）：
<select name="data[Product][to_relationship]" class="input-medium" id="to_relationship">
<option value=""></option>
<option value="F|1|Mother">Mother</option>
<option value="M|1|Father">Father</option>
<option value="M|2|Boyfriend">Boyfriend</option>
<option value="F|2|Girlfriend">Girlfriend</option>
<option value="F|3|Friend (F)">Friend (F)</option>
<option value="M|3|Friend (M)">Friend (M)</option>
</select>
这是将选择转换为ul的jquery代码：
$('select').each(function() {
//esape the square brackets in the name attribute
function $escape(string) {
return string.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
}
function $unescape(string) {
return string.replace(/\\/g, '');
}
// create new ul to replace select
$(this).after('<ul class="select"></ul>');
// define objects
var $this = $(this); // exising <select> element
var $select = $this.next('ul.select').eq(0); // new <ul> version of the select
var $form = $this.parents('form').eq(0); // the containing form
// define variables
var id = $this.attr('id'); // id of the <select>
// name of the <select>
var name = $escape($this.attr('name')); // name of the <select>
// wrap the new ul in a div we can use to anchor positioning
$select.wrap('<div class="select-container"/>');
// set a custom data attribute to maintain the name from the original select on the new ul
$select.data('name', name);
$select.attr('id', id);
// grab the first <option> item in the <select> and populate the currently selected (first) option in the ul
$select.append('<li class="current">' + $('option', $this).eq(0).html() + '<span class="value">' + $('option', $this).eq(0).val() + '</span></li>');
// duplicate the rest of <option>s in select to ul
$('option', $this).each(function() {
$select.append('<li>' + $(this).html() + '<span class="value">' + $(this).val() + '</span></li>');
});
// add hidden field to form to capture value from ul
$form.append('<input type="hidden" name="' + $unescape(name) + '" value="' + $('option', $this).eq(0).val() + '" />');
// remove the old <select> now that we've built our new ul
$this.remove();
});
$('.select li.current').click(function() {
// toggle the visible state of the ul
$(this).parents('ul.select').toggleClass('active');
});
$('.select li:not(.current)').click(function() {
// objects
var $this = $(this);
var $select = $this.parents('ul').eq(0);
var $hidden = $('input[name=' + $select.data('name') + ']');
var $current = $('.current', $select);
// set the current text
$current.html($this.html());
// close the ul
$select.removeClass('active');
// populate the hidden input with the new value
$hidden.val($this.find('.value').text());
});
$('body, html').mouseup(function() {
if ($('.select.active').length != 0) {$('.select.active').removeClass('active');}
});
样式化的 CSS 是：
.select-container {
float: left;
height: 40px;
min-width: 170px;
margin-right: 10px;
position:relative;
}
.pull-left{float:left}
ul.select {
list-style: none;
color: #ee3925;
width: 170px;
border: 3px solid #ee3925;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
position: absolute;
background-color:#FFF;
}
ul.select li {
min-width: 100px;
padding:0 10px;
height: 30px;
line-height: 30px;
border: 0px solid #FFF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color:#FFF;
}
ul.select li:not(.current) {
display: none;
}
ul.select.active li {
display: block;
}
ul.select li.current {
cursor: pointer;
font-weight:bold;
}
ul.select li:hover {
cursor: pointer;
}
.value{display:none;}
任何帮助将不胜感激