Call JavaScript Function Onchange Event of Dropdown List

call javascript function onchange event of dropdown list

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

your working example

How to call javascript function when select dropdown value changes?

One of the problems I was having was I was making changes and uploading using Filezilla but didn't realize the code was not being uploaded. I closed Filezilla and reopened it. Then it wanted me to upgrade it, so I did. Then the transfers started working again.

What finally worked for me was putting the function loadCounties() into the script area, outside of the $(document).ready( function, like this:

function loadCounties() {
    var stateId = $('#state').val();
    console.log("stateId=" + stateId);
}

The function is called in the select component's onchange event, like this:

<select name="state" onchange="loadCounties()" id="state">

When I put it inside the document.ready function, I would get error "function loadCounties() is not defined".

How to invoke a DropDownList onchange event when a form is loaded

You need to subscribe to a jquery event or javascript onload event to do this, as there is no 'razor' way of doing it right.

user either:

$(document).ready(function() {
       BreweryChanged();
});

OR:

document.addEventListener('DOMContentLoaded', function() {
     BreweryChanged();
}, false);

Further edit:

The document.addEventListener('DOMContentLoaded' is called when the DOM of the page is fully loaded and should be the first JS method called.
It is an event handler, so if you breakpoint in the developer console on BreweryChanged();

you should see it's action right when the content is loaded

If you breakpoint on:

document.addEventListener('DOMContentLoaded', function() {
     BreweryChanged();
}, false);

You will see an event attached to the javascript document object.
use it like this:

<script>
  //global vars go here
  document.addEventListener('DOMContentLoaded', function() {
         BreweryChanged();
    }, false);
//rest of your logic and methods
</script>

the false states it is not a read only event. you can supply another Boolean, to state if the event is cleanable or not, the default is not.

Run Javascript function onchange event of DropDownList

You need to add the change event for dropdown like following.

$(".txtMult select").on('change', multInputs);

call javascript function on asp dropdown list change

you dosent need to pass this parameter or id, you just call the function and onchange() event call the function.
in javascript use id of your dropdown list to get the value of dropdown list.

<script type="text/javascript">function processchange(value){  if(ddl.value=="American")    // your code}</script>
<dropdownlist id="ddl" onchange="processchange()" >  //enter your dropdown items    </dropdownlist>

How to get jQuery dropdown value onchange event

Try like this

 $("#drop").change(function () {
        var end = this.value;
        var firstDropVal = $('#pick').val();
    });

Dropdown onchange calling PHP Function

simple ajax using jquery

index page

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $('#myDropDown').change(function(){
                //Selected value
                var inputValue = $(this).val();
                alert("value in js "+inputValue);

                //Ajax for calling php function
                $.post('submit.php', { dropdownValue: inputValue }, function(data){
                    alert('ajax completed. Response:  '+data);
                    //do after submission operation in DOM
                });
            });
        });
        </script>
    </head>
<body>
    <select id="myDropDown">
        <option value='' disabled selected>Assign Driver</option>
        <option value='4353'>Steve Jobs</option>
        <option value='3333'>Ian Wright</option>
        <option value='66666'>Mark James</option>
     </select>

</body>
</html>

in submit.php

<?php
function processDrpdown($selectedVal) {
    echo "Selected value in php ".$selectedVal;
}        

if ($_POST['dropdownValue']){
    //call the function or execute the code
    processDrpdown($_POST['dropdownValue']);
}

for simple js ajax use XMLHttpRequest

Call JavaScript Function Onchange Event of Dropdown List