How to Reset DropDownList After selected the value using jQuery 

Hy Folks, Today we will learn how can you reset your dropdown list using JQuery. lots of time we have the same requirements when the user select any value and after clicking the submit button select dropdown should be reset or when we have form and could be many things. 

So let's start without wasting time.

You already know about events if no so do not worry I have little explained.

Events

when we click the button or something else in the browser screen like page scroll or so many things we can do in the screen so the event is fire for all things which we do and every event has an Event Handler which is executed on every click event.

Our Requirement is Reset Dropdown list selection, so we have SelectedIndex Property for Dropdown. If we want to reset the dropdown list so we need to use the SelectedIndex Property of the Dropdownlist is set to 0.

First, you have to add a jquery library inside the head section 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 

Now we have a select dropdown that has attribute id and name and 5 user name and one Reset button. After selecting the dropdown value click on the Reset button.

<select id="user_name" name="user_name">

    <option value=" ">Please select</option>

    <option value="mohan">Mohan</option>

    <option value="ramesh">Ramesh</option>

    <option value="kiran">kiran</option>

    <option value="vivek">Vivek</option>

    <option value="radha">Radha</option>

</select>

<input type="button" id="reset_value" value="Reset" />

<br />

Now write code for dropdown using JQuery.

we have click event when someone clicks on the reset button so click event will be fire and after firing that event we will use jquery inbuild prop method and pass two params first selectedIndex and second  0.

why we use prop() method?

prop method sets or returns properties and the value of selected elements. in our case, we actually want the same.
prop('property','value');

we have property selectedIndex and the second value is 0.

Jquery Code :

<script type="text/javascript">

   

    $(document).ready(function () {

        $("#reset_value").on("click",function () { // click event 

            $("#user_name").prop('selectedIndex',0);   // selectedIndex proerty 

        })

    });

</script>

You can check online here just copy the above HTML and jquery code there.

Yeah! You have learned 😊

I hope you understood and like this article. if you like it so, please give feedback in the comment section.
If any mistakes I made here, so please let me know and improve me.
If you have any query, feel free to ask me  😊


Recommended Post

• Create Dynamic drop-down list option using JQuery and Javascript
• Onclick show and hide div using JQuery with examples
• How to create QR code Generator using Jquery?
• How to Shift Button in clock wise in JavaScript using ECMA6?
• How to Encode and Decode Strings with Base64 in JavaScripit with Examples?
• How to get all google play store apps list using PHP Scrapper?
• How to pass a variable from the command line using PHP?
• How to Submit Registration and Login Form in PHP?
• Introduction PHP
• How to get meta tags in 2 easy way in PHP