[JS] Hilfe bei JQuery!

[qooc]

Hallo,

ich möchte in JQuery wenn man auf ein select klickt das zB eine DIV Box mit der ID die man vom select bekommt angezeigt wird.

Das habe ich bisher hinbekommen nur möchte ich das die anderen wieder ausgeblendet werden wenn man zB Key 1 klickt kommt die div Box Key 1 ,
Div Box 2 und 3 sind ausgeblendet usw.

ich kann das sehr schlecht erklären deshalb vielleicht hilft euch der Code den ich gemacht habe:

jsfiddle:

PHP Code:

------- HTML BEREICH ------
 <select id="kategorie" name="kategorie" class="form-control">
   <option value="1">Test1</option>
   <option value="2">Test2</option>
   <option value="3">Test3</option>
</select>


<div id="1" style="display: none;"> Test 1 wird angezeigt , Test2 und Test3 sind nicht zusehen!</div>

<div id="2" style="display: none;"> Test 2 wird angezeigt , Test1 und Test3 sind nicht zusehen! </div>

<div id="3" style="display: none;"> Test 3 wird angezeigt , Test1 und Test2 sind nicht zusehen! </div>

---------- JQUERY BEREICH-------
$(function() {

  $('#kategorie').on('change', function(){
    var selected = $(this).find("option:selected").val();
    //alert(selected);
    $('#'+selected).show();
  });
  
}); 


Hoffe jemand kann mir hier helfen

[snow]

#moved…

[Masterkroko1]

Ich würde dein HTML schon anpassen

Pack an deine Divs eine Klasse "divShowSomething" und die Ids bildest du mit data Attributen ab "data-id=1"


Nun kannst du beim clicken deiner Optionen ein Event abfeuern und erstmal alle Divs mit der Klasse divShowSomething ausblenden und den einen wieder einblenden.

Bsp.:

$(".divShowSomething").addClass("hidden").find("[data-id='" + deinSelectedValue + "']").removeClass("hidden");

[qooc]

Originally Posted by Masterkroko1

Ich würde dein HTML schon anpassen

Pack an deine Divs eine Klasse "divShowSomething" und die Ids bildest du mit data Attributen ab "data-id=1"


Nun kannst du beim clicken deiner Optionen ein Event abfeuern und erstmal alle Divs mit der Klasse divShowSomething ausblenden und den einen wieder einblenden.

Bsp.:

$(".divShowSomething").addClass("hidden").find("[data-id='" + deinSelectedValue + "']").removeClass("hidden");

Hay,

ich kriege das irgendwie nicht hin.
Ich bin jetzt hier dran: und komme nicht mehr weiter ..

Gruß und danke dir für die bisherige Hilfe.

[Masterkroko1]

Ach lol sorry.

Versuchs mit:
$(".divShowSomething").("hidden");
$(".divShowSomething[data-id='" + selected + "']").("hidden");

& du brauchst noch eine Eintrag im Css für hidden
.hidden {
display: none;
}

& die divs müssen von Anfang an die Klasse hidden bekommen

Ich hoffe ich hab den link richtig erstellt

[qooc]

Originally Posted by Masterkroko1

Ach lol sorry.

Versuchs mit:
$(".divShowSomething").("hidden");
$(".divShowSomething[data-id='" + selected + "']").("hidden");

& du brauchst noch eine Eintrag im Css für hidden
.hidden {
display: none;
}

& die divs müssen von Anfang an die Klasse hidden bekommen

Ich hoffe ich hab den link richtig erstellt

Danke funktioniert genau so wie ich es haben wollte!

[Hyukisawa]

Ich würde da noch eine Default Option hinzufügen

<select id="kategorie" name="kategorie" class="form-control">
   <option value="0">Kategorie auswählen</option>
   <option value="1">Test1</option>
   <option value="2">Test2</option>
   <option value="3">Test3</option>
</select>

[False]

Habe den Code noch etwas optimiert(meiner Meinung nach).Was ich mir angewöhnt habe ist, das wenn ich in einer Variable ein Jquer Object speicher das ich ein $ davor mache.
Dann sieht man beim nutzen der Variable sofort, ist es ein Object oder ein Wert.
Und noch ein paar Änderungen:
- on('change',function) zu change(function)
- addClass and removeClass zu hide and show (brauchst du keine class für zu erstellen)

$(function() {
    var $kategorie = $('#kategorie');
  $kategorie.change(updateDivs);
    
  function updateDivs(){
    var selected             = $(this).val();    
    var $divsToToggle = $(".divShowSomething");
    
        $divsToToggle.hide();
    $divsToToggle.filter("[data-id='" + selected + "']").show();
  }
});

Wenn das Div sofort angezeigt werden soll, also beim ersten Aufruf(Oder halt sofort anzeigen, jenachdem wie du das ganze verwendest) :
$kategorie.trigger('change');

€: Das heißt nicht das es perfekt ist, natürlich sind die Namen z.b. scheußlich

[Menan]

[Hyukisawa]

Originally Posted by .ƒaℓsє.

Habe den Code noch etwas optimiert(meiner Meinung nach).Was ich mir angewöhnt habe ist, das wenn ich in einer Variable ein Jquer Object speicher das ich ein $ davor mache.
Dann sieht man beim nutzen der Variable sofort, ist es ein Object oder ein Wert.

Problem ist halt wenn man Frameworks benutz ala AngularJS wo $ für viele Sachen in Angular steht

[False]

Originally Posted by Hyukisawa

Problem ist halt wenn man Frameworks benutz ala AngularJS wo $ für viele Sachen in Angular steht

Noch nie mit AngularJS gearbeitet, aber wenn ich var $ajaxResponse = ...... habe dann wird doch wohl ordentlich unterschieden oder nicht ?

[Hyukisawa]

Originally Posted by .ƒaℓsє.

Noch nie mit AngularJS gearbeitet, aber wenn ich var $ajaxResponse = ...... habe dann wird doch wohl ordentlich unterschieden oder nicht ?

Klar

[False]

Originally Posted by Hyukisawa

Klar

Dann sollte es ja kein Problem sein es weiter zu führen, natürlich bringt es ein bei Angular nichts mehr, weil man es dann auch nicht mehr weiß ob es ein Jquery Object ist oder nicht, jedoch ist die Frage was besser ist... es nicht zu wissen oder immer was anderes zu machen.

[Hyukisawa]

Originally Posted by .ƒaℓsє.

Dann sollte es ja kein Problem sein es weiter zu führen, natürlich bringt es ein bei Angular nichts mehr, weil man es dann auch nicht mehr weiß ob es ein Jquery Object ist oder nicht, jedoch ist die Frage was besser ist... es nicht zu wissen oder immer was anderes zu machen.

Das ist jedem selbst überlassen
Wir sollten hier mal mit dem Thema aufhören...

Sorry für Offtopic.