1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="customSelect">
<div class="selectLeft">
<div class="selectOptions" style="display:none;">$name){ ?></div>
<input class="selectInput" name="<?php echo $inputName;?>" type="hidden" /></div>
<div class="selectRight">
<div class="selectDropDownArrow"><img src="img/dropDownArrow.jpg" alt=">>" /></div>
</div>
</div>
<script type="text/javascript">// <![CDATA[

$(document).ready(function(){
	//set the default item to show

	setSelectedOption('');
});
// ]]></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

$(document).ready(function(){
//capture clicks anywhere and hide dropdown menu

$(this).click(function(){
$('.selectOptions').slideUp('fast');
});

//click on the selected item div to toggle menu

$('.selectedCategoryDiv').click(function(e)
{
$(this).siblings('.selectOptions').slideToggle('fast');
e.stopPropagation();
return false;
});

//click on the down arrow to toggle menu

$('.selectDropDownArrow').click(function(e){
$(this).parent('.selectRight').siblings('.selectLeft').children('.selectOptions').slideToggle('fast');
e.stopPropagation();
return false;
});

//hover on menu item to change color

$('.selectOptions').children('div').hover(
function(){
$(this).addClass('hoverItem');
},
function(){
$(this).removeClass('hoverItem');
}
);

//click on menu item to select

$('.selectOptions').children('div').click(function(e){
$(this).parent('.selectOptions').siblings('.selectInput').val($(this).attr('value'));
$(this).parent('.selectOptions').slideUp('fast');
$(this).parent('.selectOptions').siblings('.selectedCategoryDiv').html($(this).html());
e.stopPropagation();
return false;
});
});
function setSelectedOption(id)
{
if(id != '')
{
$('.selectOptions').each(function(){
$(this).children('div').each(function(){
if($(this).attr('value') == id)
$(this).click();
});
});
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

.customSelect
{
padding:0 4px;
}
.selectedCategoryDiv
{
background-color:#FFFFFF;

padding:4px 5px;
font-weight:bold;
font-size:16px;
width:215px;
cursor:pointer;
}
.selectLeft
{
float:left;
border-top:1px solid #93a8ad;

border-bottom:1px solid #FFFFFF;

border-left:1px solid #bac8cb;

border-right:1px dotted #93a8ad;

position:relative;
}
.selectOptions
{
position:absolute;
top:29px;
left:0px;
background-color:#FFFFFF;

width:225px;
padding:0;
}
.selectOptions div
{
padding:2px 7px;
cursor:pointer;
font-size:16px;
}
.selectRight
{
float:left;
background-color:#FFFFFF;

border-top:1px solid #93a8ad;

border-bottom:1px solid #FFFFFF;

border-left:none;
border-right:1px solid #FFFFFF;

}
.selectDropDownArrow
{
padding:7px 8px 6px 8px;
cursor:pointer;
border:none;
margin:0;
}
.hoverItem
{
color:#ef3e36;

}

1
2
3
4
5
6
7

//input name is the name of original select

//datais an array of menu items, how you structure is up to you

//selected is the value of the selected menu item

echo $this->element('customSelect',array('inputName'=>'data[category]','data'=>$categories,'selected'=>''));