Pokaż/Ukryj wielu div z wybierz za pomocą jQuery

Question

I zasadniczo mają takiej samej sytuacji jak osoby w następujące pytanie:

Link: how to show/hide divs by select.(jquery)

Dzięki rozległej wyszukiwania w Google udało mi się wymyślić kilka różne metody, w których ludzie twierdzą, że ich metoda działa. Muszę jeszcze sprawić, aby ktokolwiek działał poprawnie. Nie wiem jeszcze wystarczająco dużo o jQuery, aby w pełni zrozumieć, jak napisać to od zera, a więc teraz polegam na naprawdę dobrych przykładach.

Co Próbowałam pracować (na podstawie przykładów znalazłem i próbowałem) jest taka:

<script type="text/javascript"> 
    (document).ready(function() { 
     ('.box').hide();<br/> 
     ('#dropdown').change(function() { 
     ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]() 
     ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]() 
     ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]() 
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

• Uwaga: używam nawiasów zamiast mniej niż i większe -nie znaki wokół html, aby wyświetlać poprawnie w tej wiadomości.

co otrzymuję kiedy to sprawdzić:

• Na pierwszym obciążeniu nic wybranym => nr DIV jest wyświetlacz.
• Po wybraniu obszaru DIV 1 => wyświetlane są obszary DIV 2 i 3.
• Po wybraniu obszaru DIV 2 => Obszar DIV 1 i 3 zostaną wyświetlone.
• Po wybraniu obszaru DIV 3 => Obszar DIV 1 i 2 są wyświetlane.

Mój mózg jest smażony na cały dzień. Co mogę zrobić, aby to naprawić?

Answer 1

Zmienne pokaż/ukryj tak, że wygląda tak:

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]() 

Answer 2

Kod ten jest nieco bardziej zwięzła:

$(document).ready 
(
    function() 
    { 
    $("div.box").hide(); 
    $("#dropdown").change 
    (
     function() 
     { 
     var selectedValue = $(this).val(); 
     if(selectedValue !== "0") 
     { 
      $("div.box").show(); 
      $("#div" + selectedValue).hide(); 
     } 
     } 
    ); 
    } 
}; 

Zasadniczo, jeśli jest wybrana wartość (czyli opcja nie jest ustawione na "Wybierz"), a następnie wyświetlane są wszystkie elementy div.box. DIV pasujące do wybranej opcji jest następnie ukryte. Powinno to nastąpić wystarczająco szybko, aby lampa błyskowa nie była zauważalna.

Answer 3

Chciałbym to zrobić:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.box').hide(); 
    $('#dropdown').change(function() { 
    $('.box').hide(); 
    $('#div' + $(this).val()).show(); 
}); 
}); 
</script> 
<form> 
<select id="dropdown" name="dropdown"> 
    <option value="0">Choose</option> 
    <option value="area1">DIV Area 1</option> 
    <option value="area2">DIV Area 2</option> 
    <option value="area3">DIV Area 3</option> 
</select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 

Answer 4

@fudgey dał piękny rozwiązanie. ale nie mam wątpliwości. Będzie to zależało od wartości i potrzeby zmiany identyfikatora ID atrybutu<div> za każdym razem.

Tak bym to zrobić `

$(document).ready(function() { 
     $('.box').hide(); 
     $('#dropdown').change(function() {  
      var selectedIdx = (0 == $(this).attr("selectedIndex"))? '' :     $(this).attr("selectedIndex"); 
      if("" != selectedIdx){ 
       $('#divarea'+ selectedIdx).hide().siblings().show(); 
      } else { 
       $('.box').hide(); 
      }   
     }); 
    }); 
</script> 
<form> 
    <select id="dropdown" name="dropdown"> 
     <option value="0">Choose</option> 
     <option value="area1">DIV Area 1</option> 
     <option value="area2">DIV Area 2</option> 
     <option value="area3">DIV Area 3</option> 
    </select> 
</form> 
<div id="divarea1" class="box">DIV Area 1</div> 
<div id="divarea2" class="box">DIV Area 2</div> 
<div id="divarea3" class="box">DIV Area 3</div> 
</html>`