カスタムスタイルの選択ドロップダウン（3つあります）フォーム入力を作成する必要があります。CSSでこれを行う良い方法がわからないため、jqueryを使用してこれを実現しました。私が抱えている問題は、さまざまな要素の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>
これは、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;}
どんな助けでも大歓迎です