Dropdown selected change event in jQuery Example

This dropdown selected change event in jQuery example, how to use dropdown selected change event in jQuery with example and dropdown selectedindexchanged event in jQuery example. Here we will discuss how to handle the dropdown selected index change event using JQuery.

In one of the requirements, we had one dropdown list which has options like Happy, Satisfied, and Sad. We need to show a comment box when the user selects Sad from the dropdown list. Else the comment box should be hidden.

Dropdown selected change event in jQuery Example

First, we are creating an HTML file. The HTML file contains the following code:

<!DOCTYPEhtml>
<html>
<scriptsrc=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<scriptsrc=”https://onlysharepoint2013.sharepoint.com/sites/Raju/tsinfo/SiteAssets/HtmlJsCssFiles/SatisfactionDropdown.js”></script>
<body>
<h1>Suggestion Box</h1>
Choose an Option: <selectid=”ddlSuggestion”>
<optionvalue=”0″>Happy</option>
<optionvalue=”1″>Satisfied</option>
<optionvalue=”2″>Sad</option>
</select>
<br/>
<textarearows=”4″cols=”50″id=”txtComments”>
</textarea>
<inputtype=”button”value=”click me”id=”btnClick”>
</body>
</html>

Inside the script tag in the src attribute we have to include the CDN(Content Delivery Network).Google and Microsoft both provide CDN. Here we are using Google CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here we are using another script tag .Inside the script tag in the src attribute we are giving the js file path.

$(document).ready(function () {
$(“#ddlSuggestion”).change(function () {
getelementfromdropdown()
});
});
functiongetelementfromdropdown() {
var value = $(“#ddlSuggestion”).val();
if (value == “2”) {
$(“#txtComments”).show();
} else {
$(“#txtComments”).hide();
}
}

The “document.ready function()” is executed when the page load is completed. We are calling the method inside document.readyfunction().

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

In the below function we are using the select option id. The change event occurs when the value of the element is changed.

$("#ddlSuggestion").change(function ()

The “getelementfromdropdown()” is a method and function name which we are calling in ready function and declare below.

Function getelementfromdropdown()

In the getelementfromdropdown method, we are writing the code. We are declaring a variable named as a value in var.

According to the value selected from the dropdown by the user will store in the value variable.

var value = $("#ddlSuggestion").val();

Here we are using an if else statement. In if condition we are comparing the user selected value with dropdown value.

When the user-selected value is 2 (2 is the value of sad we can see in the HTML) then sad will select and a text box will come.

In the else part we write when the value is not equal to 2 then the text box should be hidden.