Reset Multiple Select Options

Question

So I am using a find_select() function in javascript, and what I would like to have happen, is when a particular select option is changed, have it reset all other possible select options beyond the first one. Here's the snippet of code for the function as well as the select option that I would like to reset everything else.

function find_select(){
if (document.getElementById("nsp").selected == true){

        if (document.getElementById("pre_alerts_yes").selected == true){
            document.getElementById('house_form').style.display = 'none';
            document.getElementById('nsp_form').style.display = 'block';
            document.getElementById('pre_alerts_yes_form').style.display = 'block';
            document.getElementById('feedback_form').style.display = 'none';
        }
        else{
            document.getElementById('house_form').style.display = 'none';
            document.getElementById('nsp_form').style.display = 'block';
            document.getElementById('feedback_form').style.display = 'none';
        }
}
else if (document.getElementById("feedback").selected == true)
{
    document.getElementById('house_form').style.display = 'none';
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'block';
}
else if (document.getElementById("house").selected == true)
{
    document.getElementById('house_form').style.display = 'block';
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'none';
}   
else{
    document.getElementById('house_form').style.display = 'none';
    document.getElementById('nsp_form').style.display = 'none';
    document.getElementById('feedback_form').style.display = 'none';
}
}

And the html code:

 <label for="input_title">Phone Type:</label>
 <select name="phone_type" id="select_form" class="input-block-level" onchange="find_select()">
   <option id="blank" value="blank"></option>
   <option id="house" value="1">House Phone</option>
   <option id="nsp" value="2">Normal Cell (Non Smart Phone)</option>
       <option id="feedback" value="3">SmartPhone</option>
 </select>

As an example of what happens is this. If a user select "House Phone" another drop down appears based on that selection, and they can then select something within it. But, if the user changes his mind and wants to do say Smart Phone, the selection boxes that opened up for House Phone then disappear and the new selection boxes for Smart Phone appear. But the options they choice for House Phone, that have now disappeared, are still selected and would be posted. I'd like to reset all values based on that html above for a selection and that should then assure that only the right options are posted, with nothing extra. The examples I've found don't appear to be working in conjunction with what I have.

Thanks

Are you able to use jQuery? There is no jQuery in your code, but the question has the jQuery tag. — thepirat000, Feb 01 '14 at 03:20
Yeah there some jquery stuff that is loaded as well. I figured jQuery would be able to execute the reset over anything else. — MrTechie, Feb 01 '14 at 03:21

Ashish Kumar · Answer 1 · 2014-02-01T04:16:35.673

3

you can use this function to reset your select:

function resetSelectElement(selectElement) {
    var options = selectElement.options;

    // Look for a default selected option
    for (var i=0, iLen=options.length; i<iLen; i++) {

        if (options[i].defaultSelected) {
            selectElement.selectedIndex = i;
            return;
        }
    }

    // If no option is the default, select first or none as appropriate
    selectElement.selectedIndex = 0; // or -1 for no option selected
}

Now use the function to reset it:

resetSelectElement(document.getElementById('house_form'));

You are done!

Tip: I can see you are using document.getElementById() many times in your code. If you dont want to use jQuery, to select elements by Id, you can create a function like this to use it multiple times:

function GE(el){
    return document.getElementById(el);
}

and then you can use it multiple times in your code like:

resetSelectElement(GE('house_form'));

This will save your code and also will help you to make your code beautiful. :)

edited Feb 01 '14 at 04:16

answered Feb 01 '14 at 04:10

Ashish Kumar

2,991
3
18
27

Let me see if I can implement this. Stand by. – MrTechie Feb 01 '14 at 04:17
getElementById should be the id of the selection right? And not the "block". house_form is the id of the block, which call_type is the selection within that block. – MrTechie Feb 01 '14 at 04:22
I think, the basic idea is, whichever `select` is being hidden, you want to reset it. Here is something you should take a look: http://jsfiddle.net/ashishanexpert/QR2d4/ – Ashish Kumar Feb 01 '14 at 04:27
Looked at the jsfiddle and tried it out and still doesn't reset. – MrTechie Feb 01 '14 at 04:31
Here's a video of what you sent over and I tried. http://screencast.com/t/3XkvR8tFbmED – MrTechie Feb 01 '14 at 04:34
I have not worked on the text of select, I just wanted to do a POC... so sorry for that... Also, as of now, I am resetting all the `select` elements, please you choose which has to be reset and which has not be. – Ashish Kumar Feb 01 '14 at 04:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46569/discussion-between-mrtechie-and-ashish-kumar) – MrTechie Feb 01 '14 at 04:57
while that works, it destroys all the other code 'effects' that I had. – MrTechie Feb 01 '14 at 04:59

thepirat000 · Answer 2 · 2014-02-01T04:44:22.037

To clear the selection of the select, you can set the property selectedIndex to 0, like this:

$('#select_form').prop('selectedIndex', 0);

Edit:

You can name the grouping containers (I'm assuming there are divs) accordingly to the first dropdown value, for example use 'div-house' for the first group, and so on. Also you can mark these divs to have a common class name, for example 'select-group'.

Like this:

<label for="input_title">Phone Type:</label>
 <select name="phone_type" id="select_form" class="input-block-level" onchange="find_select()">
   <option id="blank" value="blank"></option>
   <option id="house" value="1">House Phone</option>
   <option id="nsp" value="2">Normal Cell (Non Smart Phone)</option>
   <option id="feedback" value="3">SmartPhone</option>
 </select>

<div id="div-house" class="select-group">
    ....
</div>

<div id="div-nsp" class="select-group">
    ...
</div>

<div id="div-feedback" class="select-group">
    ...  
</div>

Then, you can do it in a simple manner, like this:

$(document).ready(function () {
    $(".select-group").hide();
});

function find_select()
{
    // Hide all the dynamic divs
    $(".select-group").hide();
    // Clear the selection of ALL the dropdowns below ALL the "select-group" divs.
    $(".select-group").find('option:selected').removeAttr('selected');
    var select = $("#select_form");
    if (select.val() > 0)
    {
        // Show the div needed
        var idSelected = select.find('option:selected').attr('id');
        $("#div-" + idSelected).show();
    }
}

Working sample here: http://jsfiddle.net/9pBCX/

Does that do it for only that id/element tho? Or does it reset all of them? — MrTechie, Feb 01 '14 at 03:59
Since there are dropdowns, there cannot be more than one value selected, right? — thepirat000, Feb 01 '14 at 04:01
Want me to show you a quick video? Then you will understand what I mean. Take me 2 seconds to put it together. — MrTechie, Feb 01 '14 at 04:03
So I tried your resolution and what happens now is they all start in the "open" position, and then onchange of the home it then closes everything up and nothing shows. here's a video http://screencast.com/t/BKoCEkw2b — MrTechie, Feb 01 '14 at 05:18
$('#select_form').prop('selectedIndex', 0); ---> 0 selects the first element, -1 clears all selections. — agapitocandemor, Nov 26 '19 at 12:35

score 0 · Answer 3 · answered Feb 01 '14 at 06:41

Hey Mr. Techie, I'm running out of time but want to share something with you which can give you very clear and concise idea about your controls logic you are trying to achieve. You will need to work around a bit, as these are quite basic cookies I was created back in time. Try to understand and create a logic around this, I hope it will be helpful. Thanks.

Here are two simple examples. You can look at the jquery documentation for the right attributes, which will suit your needs.

[Example 1:] http://jsfiddle.net/Superman/X4ykC/embedded/result/

//enable disable button on decision checkbox.
$(function() {
    $('#agree').change(function() {
        $('#submit').attr('disabled', !this.checked);
    });
});

[Example 2:] http://jsfiddle.net/Superman/XZM5r/embedded/result/

//enable disable controls on checkbox

$(function() {
  enable_cb();
  $("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("input.group1").removeAttr("disabled");
  } else {
    $("input.group1").attr("disabled", true);
  }
}

score 0 · Answer 4 · answered Feb 01 '14 at 07:47

So I finally figured it out. Man what a pain! Here's what finally worked for me to get it work like I wanted it to:

        // For the drop down switches   
    $(function(){
        $('#phone_type').change(function(){
            $('#call_types option[value=""]').attr('selected','selected');
            $('#pre_alerts option[value=""]').attr('selected','selected');
            $('#pre_alerts_types option[value=""]').attr('selected','selected');
            $('#alert_type option[value=""]').attr('selected','selected');
         // Because one box is being stupid, we set the display to none
            document.getElementById('pre_alerts_yes_form').style.display = 'none';
        });

    });

Reset Multiple Select Options

4 Answers4

Edit: