JQuery/Javascript Clear/Reset Drop down List to original values

Question

Ok dokey, got a bit of jquery up and running, lovely stuff.

  
$(document).ready(function() { 
    $inputs = $("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx");
    $.each($inputs, function() { 
        $(this).focus(function() { 
              $.each($inputs, function() { 
                  $(this).val('');
                  $(this).attr('checked', false); 
              }) 
        }); 
    }) 
});

However, in my drop down list, I wish to retain the orignal value rather than clear it altogether.

Is there a way I can specify the individual values i.e. tbxProdAC ='', ddlBuyer = Original Value, txtbxHowMany='', radTopx =unchecked, etc?

Sorry about that onodrowan..I was being dense and should have used the html properly! — MrDean
– MrDean, Commented Nov 27, 2009 at 14:44
i don't get it too, which of those elements is the select box? all those elements you specified seems to be checkboxes. — paolo granada lim
– paolo granada lim, Commented Nov 27, 2009 at 14:47
Hello Paulo. Essentially I have three searches going on in one page. A textbox search (tbxProdAC) a dropdownlist (ddlBuyer) and a textbox/radio button list. What I am trying to achieve is a process whereby if a user selects one of these searches, the content of the others is cleared i.e. essentially removing the need for a general "Reset all" button or equivalent. — MrDean
– MrDean, Commented Nov 27, 2009 at 14:51

TeKapa · Accepted Answer · 2009-11-27 18:19:59Z

6

have you tryed:

document.getElementById('formId').reset();

try it this way:

$(document).ready(function() { 
    $("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx").focus(function() { 
              document.getElementById('formId').reset(); 
        }); 
});

answered Nov 27, 2009 at 18:19

TeKapa

5462 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrDean Over a year ago

Hello TeKapa I tried your method above but on the "document.getElementById('formId').reset();" line I get an error - "is null or or not an object." Thanks for looking into this for me.

MrDean Over a year ago

Sorry - I was being a tool and still left that line in i.e. document.getElementById('formId').reset(); That has worked a dream...thank you very very much.

Gausie · Accepted Answer · 2009-11-27 14:39:16Z

5

You'll have to go through each one separately to do that.

i.e.

$('#tbxProcAC').val('');
$('#ddlBuyer').val($('#ddlBuyer')[0].defaultValue);
$('#txtbxHowMany').val('');
$('#radTopx').attr('checked',false);

Perhaps the second line there may be of most intrest to you - it shows how to access the original 'default' value.

Comment if you've any questions, good luck!

answered Nov 27, 2009 at 14:39

Gausie

4,3891 gold badge28 silver badges37 bronze badges

3 Comments

MrDean Over a year ago

Thanks Gausie - I am assuming just remove the original $(this).val(''); line and replace with your suggestion? As you can probably tell, newbie here willing to learn but only being two weeks into knowing anything about creating a web app, I'm struggling with the amount to learn!

Gausie Over a year ago

All you need is what I've given you! (with $(document).ready(function() { and } wrapped around of course). Read about selectors on the jQuery site for more info (docs.jquery.com/Selectors). Also, could you mark mine as answered, if it helped you with the problem? I like rep :-)

asakura89 Over a year ago

$('#ddlBuyer')[0].defaultValue gives me undefined so $('#ddlBuyer').val(undefined); is the simplest way to reset dropdown ;)

matpol · Accepted Answer · 2009-11-27 14:38:46Z

0

You can use the data function in JQuery - you can store all the existing values and call them again when you need them

answered Nov 27, 2009 at 14:38

matpol

3,0741 gold badge16 silver badges20 bronze badges

Comments

Yasir Aslam · Accepted Answer · 2013-12-24 06:11:01Z

0

in JQuery can select First Option <option value="0" > </option> first option value is zero and text is empty. now

$('#DropDown').find('option:first').attr('selected', 'selected');

$('#DropDown')[0].selectedIndex = 0;

$('#DropDown') -> select dropdown

find('option:first') -> find first option

attr('selected', 'selected') -> set attribute selected.

edited Dec 24, 2013 at 6:11

answered Dec 24, 2013 at 6:02

Yasir Aslam

5071 gold badge5 silver badges9 bronze badges

Comments

Taryn · Accepted Answer · 2014-12-17 19:01:24Z

0

Try this simple way

 document.getElementById(‘drpFruits’).options.length=0;

edited Dec 17, 2014 at 19:01

Taryn

249k57 gold badges374 silver badges409 bronze badges

answered Dec 15, 2014 at 17:53

Munavar

112 bronze badges

Collectives™ on Stack Overflow

JQuery/Javascript Clear/Reset Drop down List to original values

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related