Ein - /Ausblenden mehrere DIVs mit Wählen Sie mit Hilfe von jQuery

Ich im wesentlichen die gleiche situation, wie die person in der folgenden Frage:

Link: gewusst wie: anzeigen/ausblenden von divs, indem Sie wählen.(jquery)

Durch umfangreiche Suche in Google war ich in der Lage zu kommen mit verschiedenen Methoden, in denen Menschen behaupten, dass Ihre Methode funktioniert. Ich habe noch zu bekommen, um korrekt zu arbeiten noch. Noch weiß ich nicht genug über jQuery zu verstehen, wie diese zu schreiben, von Grund auf, damit ich mich darauf verlassen, wirklich gute Beispiele für jetzt.

Was ich versucht habe zu arbeiten (basierend auf den Beispielen, die ich gefunden habe und ausprobiert habe), ist dies:

<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>

Hinweis: ich bin mit eckigen Klammern anstatt der weniger-als und größer-als-Zeichen rund um html korrekt anzeigen dieser Nachricht.

Was ich bekomme, wenn ich dies testen:

Beim ersten laden mit nichts ausgewählt => Kein DIV-Element angezeigt.
Wenn ich wählen Sie die DIV-Bereich 1 => DIV-Bereich 2 und 3 angezeigt werden.
Wenn ich wählen Sie die DIV-Bereich, 2 => DIV Bereich 1 und 3 angezeigt werden.
Wenn ich wählen Sie die DIV-Bereich, 3 => DIV Bereich 1 und 2 angezeigt werden.

Mein Gehirn ist gebraten für den Tag. Was kann ich tun um dies zu beheben?

Nicht eine Antwort auf deine Frage, sondern erkunden jQuery#toggle-Methode für bedingte ein - /ausblenden.

InformationsquelleAutor | 2009-09-11

10

Ich würde dies tun:
```
<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>
```
- Nach der Lektüre Ihrer vorgeschlagenen code, erkannte ich, dass in meinem drei-Zeilen wie: ('#divarea1')[ ($(this).val() == 'bereich1') ? 'hide' : 'show' ](); ich habe zunächst vergessen, das nachgestellte Semikolon. Dadurch entstanden einige der Probleme, die ich erlebte. Ich jedoch versuchte Ihren code, und es leistet genau das, was ich suchte. Danke!!!
- Wenn Sie Ihre Antwort, könnten Sie bitte schließen Sie die Frage durch ankreuzen der daneben die Zahl, danke 🙂
- wie würde das funktionieren, wenn Sie wollten, auf die Seite laden, zeigen die div entsprechend der dropdown ausgewählten Artikel? das heißt, ich werde das ausgewählte Element server-Seite, dann, wenn die Seite gerendert wird, zeigen die entsprechenden div (als oppposed alle oder keines). Danke!
- Richman: Wenn Sie fügen Sie einem ausgewählten Attribut die option server-Seite, dann fügen Sie einfach diese unterhalb der $('.box').hide(); Linie (innerhalb der document-ready-Funktion).... $('#div' + $('#dropdown').val()).show();
InformationsquelleAutor Mottie

@fudgey gegeben hat, eine schöne Lösung. haben aber wenig Zweifel. Es wird davon abhängen, Wert und ändern müssen Attribut ID <div> jeder Zeit.

Also ich würde dies tun
`

    $(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>`

InformationsquelleAutor Bit Curios

1

Swap ein - /ausblenden, so dass es wie folgt aussieht:
```
$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()
```
- Ich entschuldige mich für die nicht ansteckend ist, als ich ursprünglich gepostet... In meinem funktionierenden code, der dollar-Zeichen vorhanden sind. Sie müssen abgestreift, wenn ich meinen code gepostet.
InformationsquelleAutor T. Stone
1

Dieser code ist ein wenig kurz und bündig:
```
$(document).ready
(
  function()
  {
    $("div.box").hide();
    $("#dropdown").change
    (
      function()
      {
        var selectedValue = $(this).val();
        if(selectedValue !== "0")
        {
          $("div.box").show();
          $("#div" + selectedValue).hide();
        }   
      }   
    );
  }
};
```
Im wesentlichen, wenn es einen Wert ausgewählt ist (D. H., die option " nicht festgelegt "Auswählen"), dann alle div.box-Elemente angezeigt werden. Die DIV-matching-die ausgewählte option wird dann ausgeblendet. Dies sollte geschehen, schnell genug, so dass der Blitz nicht auffällt.
- Sie können missverstanden haben. Ich möchte nicht, dass die DIV-Elemente dargestellt werden, werden zunächst zu allen. Ich will nur EINS angezeigt, sobald eine Auswahl getroffen wurde.
- Grant: nicht $("div.box").hide() die Elemente auf der Seite geladen?
InformationsquelleAutor David Andres

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.