JQuery plugin:Custom Select

1.Create the custom select

First, You need to put div in the html <div id="replaceddl"></div>

2.use the finalselect function to create custom selelt

var ddlObj1=$("#replaceddl").finalselect({id:"test",zIndex:1,viewWidth:'260px',viewHeight:'150px',selectImage:'http://finalevillee.googlepages.com/select.png'});

3.Settings for create select

Below, word "select" means the select element(red part),word "view" means option layer.
(* must to assign)

id	Select elements of the id (*)
animalSpeed	Options sliding down the speed of
selectWidth	Select(red part) elements of the width
selectImage	You can use the other's image as the select's background, but the image of the height, it is necessary 21px.
zIndex	Option layer of the level
viewHeight	Option layer of the height
viewWidth	Option layer of the width
viewMouseoverColor	When the mouse over, the color of items
viewTop	Option layer of the top position
viewLeft	Option layer of the left position
selectText	Select default text

4.Add item to select

ddlObj1.addItem('text','value');
you can place the HTML,such as ddlObj1.addItem('<table><tr><td style="width: 37px;"><img src="http://lh3.ggpht.com/finalevillee/SEUx_A59E1I/AAAAAAAABMY/UefISwv-PgI/s144/s.png"/></td><td><span class="thistext">S</span><br/><a href="http://supers0218.spaces.live.com" target="_blank">http://supers0218.spaces.live.com</a></td></tr></table>','super s');
notice!! Surround you want to display the text by span, such as <span class="thistext">something to show</span> then,you chioce the option to display something to show at custom select plugin

5.Get Select Text & Value

var ddlObj2=$("#replacedd2").finalselect({id:"kk",selectImage:'http://finalevillee.googlepages.com/select.png'});

ddlObj2.addItem('<span class="thistext">Google</span>','http://www.google.com.tw');

$("#btnShowText").bind('click',function(){
alert(ddlObj2.getText());
});



$("#btnShowValue").bind('click',function(){
alert(ddlObj2.getValue());
});

6.Get Length

Get the options number by getLength function.
<input id="btnShowLength" value="Get Select Length" type="button">
<script>
$("#btnShowLength").bind('click',function(){
alert(ddlObj3.getLength());
});</script>

7.Remove Item

Remove item by index:
$("#btnRemoveItem").bind('click',function(){
ddlOb4.removeItem(parseInt($("#txtIndex").val()));
});