Clear all option select entries by clicking radio button

Question

I've been trying all day to figure this out, and it seems simple enough, but how can I clear (not remove) all the selections from a group of select option drop downs at once? I want them set back to their default state when the div was first loaded. I can't use .reset because there will be other information in the form that I need to gather, but I need to allow users to change their minds without penalty (having to fill the form out all over again).

This SO question shows you how to remove the options which isn't what I need.

This SO question seemed to give the answer, but I haven't been able to get it to work.

And this jQuery bug entry seems to imply that it can be done with .empty(), but that doesn't work either.

This SO question lists a bunch of different ways to do exactly what I want, and I've tried all of them (see code below), none worked. I'm obviously missing something.

Here's a JSfiddle with the problem.

How to view the problem in the fiddle:

At Repair Status, click on Repaired; two new inputs are shown, a set of radio buttons and then select-option drop downs for each. Under Category, choose Part Quality, then choose any item from the drop down. That choice should now show up in the drop down. Now click on any one of the other Categories, and then back to Part Quality. The same choice you just made will still be shown instead of the default of "Select Part Quality Reason", which is what I want.

My attempts have focused largely on the Part Quality radio button for proof of concept, but the production code needs to clear all of the entries from all of the option-selects in the form except the Reporting Department drop down. Preferably I can use a generic selection with a $(this) construct, but that's not required. Something like this:

$("select option:selected").each(function () {
    $(this).val('');  //doesn't work
});

Requirements:

When the user chooses a different radio button (Category), all of the option select drop downs will be reset to their default states. That way when the user makes their final choice & hits Submit, there are no extraneous entries. When they change their choice of Category, the underlying code must preserve the Reporting Department drop down choice.

I can then gather all the bits and pieces of their choices to be placed into a JSON string for an AJAX call to my code-behind and insert the data into a MySQL database.

I don't care if the answer uses jQuery or just plain JavaScript, I can use either happily.

Here's a bunch of attempts that haven't solved it yet:

    $("#formEvent_repair input[type='radio']").on('change', function () {
    //$("#select_part_quality_repair option:selected").attr("selected", false);

    //$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
    //$('#select_part_quality_repair').attr('selectedIndex', '-1'); 
    //$('#select_part_quality_repair').val(null);

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

    //$("select option:selected").val([]);
    //$("select option:selected").html('');
    //$("select_part_quality_repair").html('');
    $("select_part_quality_repair").append().html('');
    $("select option:selected").each(function () {
        console.log("Emptying select options");
        $("#select_part_quality_repair").find('option:first').attr('selected','selected');
        //#select_part_quality_repair-button > span
        //$("#select_part_quality_repair").prop('selectedIndex', -1);
        //$("#select_part_quality_repair").find('option').attr("selected", false);
        //$("#select_part_quality_repair option").attr("selected", false);
        $("#select_part_quality_repair option:selected").attr("selected", false);
        console.log(this);
        $(this).val([]);
    });

On a quick look I would say you should handle the `onchange` `event` for the `selects` and when it's fired, you do something like this: `$('select').not(this).val('')`. You probably got the idea. — emerson.marini, Dec 23 '14 at 21:49
it wuld be useful to have a fiddle with the relevant part of your code, for example just one select menu with a clear button — BeNdErR, Dec 23 '14 at 21:53
The JSfiddle link is about 10-12 lines down in the question. [Here's the Fiddle as well](http://jsfiddle.net/delliottg/o24jwbfm/) — delliottg, Dec 23 '14 at 21:55
If you add a `data` attribute that links the `radios` to their relative `selects`, you can do what I mentioned in the first comment. And it would also reduce your code. — emerson.marini, Dec 23 '14 at 21:57
@delliottg what I meant was to create a fiddle with just one/two select, reducing your code to better focus on the select-refresh issue, removing all the "click on this then that than this" part. — BeNdErR, Dec 23 '14 at 22:02
@delliottg no problem :) anyway, after you programmatically manipulate a select in jqmobile, you have to refresh it in order fr the browser to re-render it. This is probably your case, in the past I struggled a lot with jqm selectmenu refresh.. See here how to refresh the selectmenu: http://jsfiddle.net/4guean09/ — BeNdErR, Dec 23 '14 at 22:26
That was the trick, thanks for the help. If you want to write it up as an answer I'll select it as the correct one, even though there's now another correct answer which is basically the same as yours. — delliottg, Dec 23 '14 at 22:44
you're welcome, go for one of the already posted answers :) they beated me by time! — BeNdErR, Dec 23 '14 at 22:55
Done, and thanks for the edit to add JQM, I didn't realize it was an issue, now I know better. — delliottg, Dec 23 '14 at 23:10

Gabriele Petrioli · Accepted Answer · 2014-12-23T22:33:22.970

3

Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.

$('#select_part_quality_repair').val('').selectmenu('refresh');

This will deselect any option and then refresh the layout to show the change..

For radio buttons you set in code use

$(<radio-button-selector>).checkboxradio("refresh");

edited Dec 23 '14 at 22:33

answered Dec 23 '14 at 22:23

Gabriele Petrioli

191,379
34
261
317

C Landreaux · Answer 2 · 2014-12-23T22:24:22.263

0

You clear a dropdown selection like this:

$("#select_part_quality_repair").val("");

That will clear the selection without removing the members.

Also, this line in your code is improperly formed:

$("select_part_quality_repair").append().html('');

You forgot to put the "#" before the element ID, as is required by JQuery. That line won't help you anyway, so you should not even bother with it.

Cheers,

-=Cameron

edited Dec 23 '14 at 22:24

answered Dec 23 '14 at 22:16

C Landreaux

2,561
2
11
6

Thanks, already tried that, and it doesn't work. – delliottg Dec 23 '14 at 22:22
You had exactly the right idea, and I didn't point out that I was using jQuery Mobile (added to tags now), which requires the refresh (see answers/comments by both Gaby & BeNdeRr). – delliottg Dec 23 '14 at 22:46

mcan · Answer 3 · 2014-12-23T22:49:57.443

0

Unchecked all radio button

$(".clear").click(function(){
    $('input:radio').each(function () {

        $(this).removeAttr("checked");

    });
});

EDIT 2 :

Unselected all options

$(".clear").click(function(){
    $('select').each(function () {

        $(this).removeAttr("selected");

    });
});

edited Dec 23 '14 at 22:49

answered Dec 23 '14 at 22:41

mcan

7
2

Thanks, but I'm trying to clear all the option-select menus, not the radio buttons. – delliottg Dec 23 '14 at 22:42
Sorry, edit 2 fixed. – mcan Dec 23 '14 at 22:50
Still doesn't work, please see the accepted answer above. – delliottg Dec 23 '14 at 23:09

Clear all option select entries by clicking radio button

3 Answers3