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.
You may like following tutorials:
- Run JavaScript after page loaded completely using jQuery
- How to handle radio button checked and unchecked events using JavaScript and jQuery
- JavaScript Examples PDF free download (51 Examples)
- How to call a javascript function when a checkbox is checked unchecked
- tabulator js tutorial
In this article, we are discussed how to handle drop-down selected index using JQuery. Example: dropdown selected change event in jquery and dropdown selectedindexchanged event in jQuery example.
Bhawana Rathore is a Microsoft MVP (3 times in Office Apps & Services) and a passionate SharePoint Consultant, having around 10 years of IT experience in the industry, as well as in .Net technologies. She likes to share her technical expertise in EnjoySharePoint.com and SPGuides.com