最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Reset Multiple Select Options - Stack Overflow

programmeradmin1浏览0评论

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

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

Share Improve this question asked Feb 1, 2014 at 3:16 MrTechieMrTechie 1,8476 gold badges21 silver badges36 bronze badges 2
  • Are you able to use jQuery? There is no jQuery in your code, but the question has the jQuery tag. – thepirat000 Commented Feb 1, 2014 at 3: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 Commented Feb 1, 2014 at 3:21
Add a ment  | 

4 Answers 4

Reset to default 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. :)

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 mon 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/9pBCX/

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/Superman/X4ykC/embedded/result/

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

[Example 2:] http://jsfiddle/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);
  }
}

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

    });
发布评论

评论列表(0)

  1. 暂无评论