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? You have to update fiddle settings change the 2nd dropdown to nowrap in <head> to fidddle! — Dhaval Marthak
– Dhaval Marthak, Commented Nov 3, 2014 at 7:57

SilentTremor · Accepted Answer · 2020-11-15 18:50:15Z

23

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

your working example

edited Nov 15, 2020 at 18:50

answered Nov 3, 2014 at 8:05

SilentTremor

4,9622 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bartek Andrzejczak · Accepted Answer · 2017-09-27 10:00:01Z

22

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>

edited Sep 27, 2017 at 10:00

answered Nov 3, 2014 at 8:03

Bartek Andrzejczak

1,3422 gold badges14 silver badges31 bronze badges

Comments

Alex · Accepted Answer · 2015-04-08 07:46:30Z

16

using jQuery

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

jsFiddle

answered Apr 8, 2015 at 7:46

Alex

9,78830 gold badges107 silver badges167 bronze badges

1 Comment

Unbreakable Over a year ago

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.

jeet.chanchawat · Accepted Answer · 2017-03-03 09:16:38Z

5

You just try this, Its so easy

 <script>

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

</script>

edited Mar 3, 2017 at 9:16

jeet.chanchawat

2,6355 gold badges40 silver badges60 bronze badges

answered Sep 20, 2016 at 11:05

Dinesh.net

791 silver badge9 bronze badges

2 Comments

Unbreakable Over a year ago

How to get the text too

Rashmy Over a year ago

@Unbreakable : var e = document.getElementById("YourDropDownId"); var str = e.options[e.selectedIndex].value;

bemol · Accepted Answer · 2014-11-03 08:04:12Z

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 3, 2014 at 8:04

bemol

3954 silver badges20 bronze badges

4 Comments

Bartek Andrzejczak Over a year ago

It doesn't solve the problem. Your answer just gives good advice.

Bartek Andrzejczak Over a year ago

Weird... It actually does. Sorry about that ;)

bemol Over a year ago

it works because this: stackoverflow.com/questions/336859/…

Unbreakable Over a year ago

How to get the text also

Collectives™ on Stack Overflow

call javascript function onchange event of dropdown list

5 Answers 5

Comments

Comments

1 Comment

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related