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>

http://stackoverflow.com/questions/12080098/dropdown-using-javascript-onchange refer this.. — SVK, Sep 25 '15 at 12:34
i have aleready tried many solutions and given solutions to this question but non of them is working or something went wrong which i am not understanding @epascarello — Dhiraj, Sep 25 '15 at 12:49
Can you create a [jsbin](https://jsbin.com/) with what you've tried so far so we can investigate further ? — simdrouin, Sep 25 '15 at 14:29

score 0 · Answer 1 · answered Sep 25 '15 at 12:33

0

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()

answered Sep 25 '15 at 12:33

simdrouin

1,008
11
21

score 0 · Answer 2 · answered Sep 25 '15 at 12:35

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
});

score 0 · Answer 3 · answered Sep 25 '15 at 12:37

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);
}

score -1 · Accepted Answer · answered Sep 25 '15 at 12:41

-1

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
});

answered Sep 25 '15 at 12:41

Sunil

919
15
25

How to fire click event on select drop down

4 Answers4