View on GitHub

Demo for custom dropdown

Yet another trial to customize the default HTML "select" element

Install:

You need to add jQuery to your project and the CSS and Javascript files and the image arrow from: https://github.com/andyghiuta/dropdown
Example:

            <link href="stylesheets/dropdown.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="javascripts/dropdown.js"></script>

Demos:

1. Default functionality

Code:

            <select name="mySelect1" id="mySelect1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

<script type="text/javascript">
// On document ready
$(function(){
    // init the plugin with it's options on a selector by choice
    $('#mySelect1').dropdown();
});
</script>

2. Having a tip text and a minimum/maximum width defined

Code:

            <select name="mySelect2" id="mySelect2" data-tip="Select One">
    <option value="1">Option 1</option>
    <option value="2">Option two</option>
    <option value="3">Option three with some text</option>
    <option value="4">Option four with a very very very long text that will fall outside</option>
</select>

<script type="text/javascript">
// On document ready
$(function(){
    // init the plugin with it's options on a selector by choice
    $('#mySelect2').dropdown();
});
</script>

3. Catching the change event

You selected:

Code:

            <select name="mySelect3" id="mySelect3" data-tip="Select Another">
    <option value="1">Option 1</option>
    <option value="2">Option two</option>
    <option value="3">Option three with some text</option>
    <option value="4">Option four with a very very very long text that will fall outside</option>
</select>

<script type="text/javascript">
// On document ready
$(function(){
    // init the plugin with it's options on a selector by choice
    $('#mySelect2').dropdown({
        change: function(newVal, oldVal){
            $("#select3Values").append("Selected: "+newVal+", "+oldVal+"(newVal, oldVal) \n");
        }
    });
});
</script>