[UPDATED to allow multiple instances]
[UPDATED bug fix]
Hello everyone. The select tag that comes with html is pretty useful, but once in a while, one of your clients complains that it’s fugly. So you need to makeĀ a custom one. And that’s what i just did. Damned clients!
Requirements:
- jquery
To do this you need to create a file called customSelect.ctp in your app/views/elements folder(Of course you don’t NEED cakephp to use this.).
And the content said file would be(This example is for a category select menu.):
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>
the javascript file, customSelect.js
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();
});
});
}
}
the css file, customSelect.css
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;
}
and the image
![]()
You need to include the javascript and js files in your layout file.
And to call the element from your view files, you can do this
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'=>''));

One Comment
Hi,
I have already seen it somethere…