On clicking on close button of page i want to clear all selectbox value
Question
I have 3 selectbox on my page and onClick of close button I want to clear all the selectbox which are under the class .popup .
Below is my code to clear fields.
clearText: function() {
$('.popupBody input').val('');
$('.popupBody select').val('');
$('.popupForm').find('.errmsgActive').removeClass('errmsgActive');
$('.popupForm').find('.errmsg').html('');
}
For clearing all select boxes inside .popupBody class, I am using below code.
$('.popupBody select').val('');
4 answers
solution1
0 2016-09-08 05:07:05
Your code is looks good.. obviously $('.popupBody select').val(''); is clearing value of select dropdown under .popupBody .
BUT
Make sure, all select input must have option value='' .
See below code
$(".popupBody select").select2(); $("#clear").click(function(){ $('.popupBody select').val('-1').change(); })
@import "https://select2.github.io/dist/css/select2.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://select2.github.io/dist/js/select2.full.js"></script> <div class="popupBody"> <select> <option value="-1">Select</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="-1">Select</option> <option value="A1">A1</option> <option value="B1">B1</option> <option value="C1">C1</option> </select> <select> <option value="-1">Select</option> <option value="A2">A2</option> <option value="B2">B2</option> <option value="C2">C2</option> </select> </div> <button id="clear">Clear</button>
solution2
0 2016-09-08 05:12:20
To reset a dropdown you need to select the default element usually the first one:
$('.popupBody select').find('option:first-child').attr('selected','selected');
to reset the value in select2 use
$('.popupBody select').select2("val", "");
solution3
0 2016-09-08 05:28:06
try this, this will work for you.
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div class="popupBody"> <label>Select option one</label> <select> <option value="">-- select --</option> <option>select1 value 1</option> <option>select1 value 2</option> <option>select1 value 3</option> </select> <br><br><br> <label>Select option two</label> <select> <option value="">-- select --</option> <option>select2 value 1</option> <option>select2 value 2</option> <option>select2 value 3</option> </select> <br><br><br> <label>Select option Three</label> <select> <option value="">-- select --</option> <option>Stackoverflow</option> <option>is</option> <option>awesome</option> </select> <br><br><br> <input type="button" name="" value="CLEAR" id="closebutton"> </div> <script type="text/javascript"> $(document).ready(function(){ $("#closebutton").click(function(){ $("div.popupBody select").val(""); }); }); </script> </body> </html>
solution4
0 ACCPTED 2016-09-08 05:29:14
For clearing selection made in select2 select box you can try following approach:
$('.popupBody select').each(function(){
//iterate over all the select boxes one by one
$(this).select2("val", ""); //clearing the selection made
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.