call javascript function onchange event of dropdown list

Question

I want to invoke javascript function when value in the dropdown list changes. I dont want to hardcode dropdown list id .

Hence not using document.getElementById

My Code:

<select id ="ddl" name="ddl" onmousedown="this.value='';" onchange="jsFunction(this.value);">
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>

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

This is giving error ReferenceError: jsFunction is not defined

Fiddle : http://jsfiddle.net/6uyz4b8x/1/

[want this](http://jsfiddle.net/6uyz4b8x/2/)? You have to update fiddle settings change the 2nd dropdown to **nowrap in ** to fidddle! — Dhaval Marthak, Nov 03 '14 at 07:57

SilentTremor · Accepted Answer · 2020-11-15T18:50:15.563

22

Your code is working just fine, you have to declare javscript method before DOM ready.

your working example

edited Nov 15 '20 at 18:50

answered Nov 03 '14 at 08:05

SilentTremor

4,747
2
21
34

Bartek Andrzejczak · Answer 2 · 2017-09-27T10:00:01.207

I don't know why do you need this onmousedown event here, but what you have to do is put your function above actual usage. Look at the snipplet below:

<script type="text/javascript">
function jsFunction(value)
{
    alert(value);
}
</script>

<select id ="ddl" name="ddl" onmousedown="this.value='';" onchange="jsFunction(this.value);">
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>

score 15 · Answer 3 · answered Apr 08 '15 at 07:46

15

using jQuery

 $("#ddl").change(function () {
                alert($(this).val());
            });

jsFiddle

answered Apr 08 '15 at 07:46

Alex

8,908
28
103
157

What if I want to get the text of the selection too. I tried `$(this).text()` but it shows all the texts for all the dropdown for every single click. – Unbreakable Jul 28 '17 at 13:32

score 5 · Answer 4 · edited Mar 03 '17 at 09:16

5

You just try this, Its so easy

 <script>

  $("#YourDropDownId").change(function () {
            alert($("#YourDropDownId").val());
        });

</script>

edited Mar 03 '17 at 09:16

jeet.chanchawat

5,842
5
38
59

answered Sep 20 '16 at 11:05

Dinesh.net

79
1
9

1

How to get the text too – Unbreakable Jul 28 '17 at 13:33
@Unbreakable : `var e = document.getElementById("YourDropDownId"); var str = e.options[e.selectedIndex].value;` – Rashmy Jan 22 '18 at 10:45

score 2 · Answer 5 · answered Nov 03 '14 at 08:04

2

jsFunction is not in good closure. change to:

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

and don't use global variables and functions, change it into module

answered Nov 03 '14 at 08:04

bemol

381
3
18

It doesn't solve the problem. Your answer just gives good advice. – Bartek Andrzejczak Nov 03 '14 at 08:05
Weird... It actually does. Sorry about that ;) – Bartek Andrzejczak Nov 03 '14 at 08:10
it works because this: http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname – bemol Nov 03 '14 at 08:17
How to get the text also – Unbreakable Jul 28 '17 at 13:33

call javascript function onchange event of dropdown list

5 Answers5

Linked