CODEWITHSUNDEEP
javascriptjqueryhtml
Ray
Ray

Reputation: 73

Using jQuery, Clear the rest of the Options/DIVs after choosing from dropdown-list

This is the js i have:

<script type="text/javascript">
        $(document).ready(function(){
           $('#box1').hide();
           $('#box2').hide();
           $('#box3').hide();
           $("#thechoices").change(function(){
              if(this.value == 'all'){
                     $("#boxes").children().show();
                  }else{
                     $("#" + this.value).show().siblings().hide();
                  }
           });          
           $("#thechoices").change(); 
        });
</script>

And the Html:

    <div id="boxes">
       <div id="box1"><p>Box 1 stuff…</p></div>
       <div id="box2"><p>Box 2 stuff…</p></div>
       <div id="box3"><p>Box 3 stuff…</p></div>
    </div>

I need to clear (empty) all the rest of the options/divs after choosing from the dropdown-list, (even if i opened the source code they won't appear) and disable the dropdown-list in the same time,

how to achieve that?

Upvotes: 0

Views: 393

Answers (3)

Rune FS
Rune FS

Reputation: 21742

If I understand your requirements right then change the script to

<script type="text/javascript">
        $(document).ready(function(){
           $("#thechoices").change(function(){
              var self = $(this);
              if(self.val() !== 'all'){
                     self.attr('disabled',true);
                     $("#boxes").empty();
              }
           });          
           $("#boxes").append('<div id="box1"><p>Box 1 stuff…</p></div>       <div id="box2">p>Box 2 stuff…</p></div>       <div id="box3"><p>Box 3 stuff…</p></div>');
});
</script>

and the HTMl snippet to (no nested divs)

<div id="boxes">
</div>

If you add the boxes dynamically they will not show in view source (view source shows the html as it was send from the server). and then when you change the value of the selection you simply disable the selection and empty the boxes div

Upvotes: 0

korogui
korogui

Reputation: 203

Like Jai said maybe what you are looking for is create them dynamically.

what you are looking for is

$(document).ready(function(){
    $('#box1').hide();
    $('#box2').hide();
    $('#box3').hide();
    $("#thechoices").change(function(){
        if(this.value == 'all'){
            $("#boxes").children().show();
        }else{
            $("#" + this.value).show().siblings().remove();
            $(this).prop('disabled', 'disabled');
        }
    });          
    $("#thechoices").change(); 
});

jsFiddle code

Upvotes: 0

haim770
haim770

Reputation: 49095

Remove hidden elements:

$('#boxes').remove('div:hidden');

Disable drop-down:

$('#thechoices').attr('disabled', true);

Hence:

    $(document).ready(function(){
       $('#boxes > div').hide();

       $("#thechoices").change(function(){
          if(this.value == 'all')
              $("#boxes").children().show();
          else
              $("#" + this.value).show().siblings().hide();

          $('#boxes').remove('div:hidden'); // remove hidden boxes from DOM
          $(this).attr('disabled', true); // disable drop down
       });

       $("#thechoices").change(); 
    });

Upvotes: 1

Related Questions