CODEWITHSUNDEEP
javascriptjqueryhtmlajax
MrTechie
MrTechie

Reputation: 1847

Reset Multiple Select Options

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

Upvotes: 2

Views: 13731

Answers (4)

MrTechie
MrTechie

Reputation: 1847

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';
        });

    });

Upvotes: 0

Superman
Superman

Reputation: 881

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);
  }
}

Upvotes: 0

thepirat000
thepirat000

Reputation: 13114

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/

Upvotes: 1

Ashish Kumar
Ashish Kumar

Reputation: 3039

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

Upvotes: 3

Related Questions