How to fire click event on select drop down

Question

I have following code for drop down select showing drop down list using text and values.i google many codes as possible but none of them worked.what i wanted to show the selected drop down menu item in alert dialog.I already tried jquery and javascript codes but they are not working please help me to out of this problem

  <div class="col-sm-1"></div>
            <div class="col-sm-3">
                <div class="fleft " id="drop-down">

                    <select id="cd-dropdown" class="cd-select"  >

                        <option value="1" >Home</option>
                        <option value="2" >Movies</option>

                        <option value="3" >T.V. Shows</option>
                        <option value="4" >Photos</option>
                        <option value="5" >Site Help</option>

                    </select>
                </div>
            </div>

Answer 1

Using JQuery, you could do something like this:

$('#cd-dropdown').bind('change', function () {
   alert($(this).find('option:selected').text());
});

If you want the value instead of the text, use .val()

Answer 2

on changing

$(document).ready(function(){
    $("#cd-dropdown").change(function(){
       alert($(this).find('option:selected').val()); // val or text
    });
});

or on loading

$(document).ready(function () {
     alert($("#cd-dropdown").find('option:selected').val()); // val or text
});

Answer 3

Updated link

HTML code:

 <div class="col-sm-1"></div>
                <div class="col-sm-3">
                    <div class="fleft " id="drop-down">

                        <select id="cd-dropdown" class="cd-select"  onmousedown="this.value='';" onchange="jsFunction(this.value);" >

                            <option value="1" >Home</option>
                            <option value="2" >Movies</option>

                            <option value="3" >T.V. Shows</option>
                            <option value="4" >Photos</option>
                            <option value="5" >Site Help</option>

                        </select>
                    </div>
                </div>

JS code:

function jsFunction(value)
{
    alert(value);
}

Answer 4

You can do so using jQuery like this

$(document).on('change',"#cd-dropdown", function(){
 alert($(this).val());  // will display selected option's value
 alert($(this).find('option:selected').text()); //will display selected option's text
});