CODEWITHSUNDEEP
javascripthtmlselect
Yohan Aluthwala
Yohan Aluthwala

Reputation: 35

how to refresh select field without refreshing full page

I have two levels of drop down (select box).

If i select something on fist level then second drop down set will appear according to fist selection

ex: I have 6 selection on first level, for each selection i have another 6 drop down set hide on page. as user selection it will show second level drop down.

this is first level

<select name="TapeType" id="TapeType">
            <option value="s">&lt;Select&gt;</option>
            <option value="Polypropylene Tape" id="PT">POLYPROPYLENE TAPE</option>
            <option value="HD Polypropylene Tape">HD POLYPROPYLENE TAPE</option>
            <option value="X HD Polypropylene Tape">X HD POLYPROPYLENE TAPE</option>
            <option value="PVC Tape">PVC TAPE</option>
            <option value="HD PVC TAPE">HD PVC TAPE</option>
            <option value="Reinforced Paper Tape">REINFORCED PAPER TAPE</option>
            <option value="Flatback Tape">FLATBACK TAPE</option>

        </select>

This is two example of second level

01

<select name="TapeColorPT" id="TapeColorPT" class="toggledDropDown">
            <option value="Tan">Tan</option>
            <option value="White">White</option>
            <option value="Clear">Clear</option>
            <option value="Red">Red</option>
            <option value="Orange">Orange</option>
            <option value="Yellow">Yellow</option>      
      </select>

02

<select name="TapeColorHPT" id="TapeColorHPT" class="toggledDropDown">
            <option value="Tan">Tan</option>
            <option value="White">White</option>
            <option value="Clear">Clear</option>
      </select>

For show each drop down i use this method with js

$('.toggledDropDown').hide();

 $('#TapeType').change(function () {             

    if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
        $('#TapeColorPT').show();

    }
     else { 
          $('#TapeColorPT').hide();

if ($('#TapeType option:selected').val() == "HD Polypropylene Tape"){
        $('#TapeColorHPT').show();      
    }
     else { 
          $('#TapeColorHPT').hide();
     }
     }});

my issue is

example : when i select 1 one first level and i select 3 on second level. then i go back to first level and select 2, so another set of second level drop down appear. After that when i go back to select 1 on first level my previous selection of 3 on second level will be there. I want it to be select none when i come back to it again.

so i think this i can do if some one let me know how to refresh selection box with javascript(js) without refreshing full page.

Upvotes: 0

Views: 4626

Answers (2)

Mohamed AbdElRazek
Mohamed AbdElRazek

Reputation: 1684

you can try modify your js function to this :

 $('#TapeType').change(function () { 

     //you will hide the second and third level
     $('.toggledDropDown').hide();

     //here i reset the second and third level to defaults by selecting the top one
     $('#TapeColorPT,#TapeColorHPT').attr('value','Tan');

     //here get the value od the first dropdown
     var tapeTypeVal = $('#TapeType').val();

    //here i switch for the 6 option of the first dropdown to know which dropdown will 
    //be appear
    switch (tapeTypeVal) {
    case 'POLYPROPYLENE TAPE':
        $('#TapeColorPT').show();
        break;
    case  'HD Polypropylene Tape':
        $('#TapeColorHPT').show();
        break;
    }

});

Upvotes: 2

Joseph Myers
Joseph Myers

Reputation: 6552

Try putting your top line of code also inside the body of the onchange event handler:

$('.toggledDropDown').hide(); /* existing top line of code can remain here */

$('#TapeType').change(function () {             
$('.toggledDropDown').hide(); /* but also add it right here */
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
    $('#TapeColorPT').show();

}
...

Complete code

$('.toggledDropDown').hide();

 $('#TapeType').change(function () {             

$('.toggledDropDown').hide(); /* adding this line here is the only change */

if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
    $('#TapeColorPT').show();

}
 else { 
      $('#TapeColorPT').hide();

if ($('#TapeType option:selected').val() == "HD Polypropylene Tape"){
    $('#TapeColorHPT').show();      
}
 else { 
      $('#TapeColorHPT').hide();
 }
 }});

Upvotes: 0

Related Questions