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

Solution 1

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. :)

Solution 2

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/

Comments

[MrTechie]

Does that do it for only that id/element tho? Or does it reset all of them?

[thepirat000]

Since there are dropdowns, there cannot be more than one value selected, right?

[MrTechie]

Want me to show you a quick video? Then you will understand what I mean. Take me 2 seconds to put it together.

[MrTechie]

Let me see if I can implement this. Stand by.

[MrTechie]

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.

[Ashish Kumar]

I think, the basic idea is, whichever select is being hidden, you want to reset it. Here is something you should take a look: jsfiddle.net/ashishanexpert/QR2d4

[MrTechie]

Looked at the jsfiddle and tried it out and still doesn't reset.

[MrTechie]

Here's a video of what you sent over and I tried. screencast.com/t/3XkvR8tFbmED

[Ashish Kumar]

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.

[MrTechie]

let us continue this discussion in chat

[MrTechie]

while that works, it destroys all the other code 'effects' that I had.

[MrTechie]

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 screencast.com/t/BKoCEkw2b

[agapitocandemor]

$('#select_form').prop('selectedIndex', 0); ---> 0 selects the first element, -1 clears all selections.