Skip to main content

Custom Select Box with new approach



This is my new JQuery plugin for replacing select box. I have tried to implement some cool features which makes it easy to implement and you can play with it as like the native one.

Your suggestions, issues are welcome, so that I can improve this plugin

DEMO

Fork this on GitHub

Implementation:

Step 1: include css and scripts in head section

<link href="customselectbox.css" rel="stylesheet" type="text/css"></link>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="customselectbox.js"></script>

Step 2: initialize customselect box

$(document).ready(function(){
  $('select').customSelect();
});

Features:

  1. Support thumbnails within option
  2. Search option
  3. Set and Get value with normal JQuery method. No need to process or query the generated new select box, you can use the ref of the native select box.
    eg:
    //set value
    $('#myselect').val(value);
    //get value
    $('#myselect').val();
    
    
  4. Support native reset within the form - i.e) when form gets reset the value of the select box gets reset to its default value
  5. supported browsers: IE8+, firefox, safari, chrome
  6. attaching events,
    $('select').change(function () {
       alert('Change Event Fired');
    });
    
    $('select').click(function () {
      alert('Click Event Fired');
    });
    
    

Comments

Popular posts from this blog

Random Bouncing Ball Animation

Simple animation of random balls that bounces within the screen Source: #include<stdio.h> #include<graphics.h> #include<conio.h> #include<dos.h> #include<math.h> void drawBall(struct ball *b, int color); struct ball{ int x, y; int dx, dy; int radius; }; void main() { int gd=0, gm=VGAHI; int i; struct ball b[10]; initgraph(&gd, &gm, ""); for(i=1;i<=15;i++){ b[i].radius = rand()%20; b[i].x=rand()%getmaxx(); b[i].y=rand()%getmaxy(); b[i].dx=2; b[i].dy=4; } while(!kbhit()) { delay(5); cleardevice(); for(i=1;i<=15;i++) drawBall(&b[i],i); } closegraph(); } void drawBall(struct ball *b, int color){ setfillstyle(1,color); setcolor(color); fillellipse(b->x, b->y, b->radius, b->radius); if(b->x+b->radius > getmaxx() || b->x-b->radius<0) b->dx = -b->dx; if(b->y+b->radius > getmaxy() || b->y-b->radius<0) b->dy = -b->dy; b->x+=b-...

Simple Animation Using C

Here i have used fillpoly function to draw the object body and used fillellipse function to draw tier. animation is done by looping through the objects x & y position until user hits a key. Keypress event is achived  by using kbhit function. Smoothness of animation is controlled by delay function. Change the delay values to change the animation speed Source: #include<stdio.h> #include<conio.h> #include<graphics.h> #include<dos.h> void main() { int gd=DETECT,gm,i=-300,j; int poly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; int tpoly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; initgraph(&gd,&gm,""); getch(); while(!kbhit()) { for(j=0;j<16;j+=2) { poly[j]=tpoly[j]+i; } fillpoly(8,poly); setfillstyle(5,7); bar(275+i,60,295+i,85); setfillstyle(5,8); fillellipse(140+i,140,20,20); fillellipse(280+i,140,20,20); setfillstyle(1,0); fillellipse(140+i,140,10,10); fillellipse(280+i,140,10...

Things you may not know about CSS

Grammatical error like style using CSS: .grammar{ -moz-text-decoration-color: green; -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; text-decoration-color: green; text-decoration-line: underline; text-decoration-style: wavy; } Output : CSS 'empty-cells' Property table{ empty-cells:hide; }    CSS @supports  Usually we do CSS feature-test using JavaScript. Now it can be done in CSS with a new property '@supports' . So for Firefox 22+ , Chrome 28+, Opera 12.1+ supports this feature. So we can look forward to using it soon! Example: /* basic usage */ @supports(prop:value) { /* more styles */ } /* real usage */ @supports (display: flex) { div { display: flex; } } /* testing prefixes too */ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: f...