je Auswahl erstes Dropdown das zweite ändern ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auswahl
beispiel
break
code
datum
feld
funktionieren
kleinere preise
konstrukt
machen
option
ordern
rank preis
richtung
schwerer lesbaren code
sinnlose switch
standard
stelle
url
zeile
-
Hallo
wie kann ich es machen,
wenn der User im ersten DropDown das Element mit
auswält,value="Price"
dass dann im zweiten DropDown automatisch
gesetzt wirdvalue="ascending"
aber wenn User
auswähltvalue="Score"
dass dann wieder
gesetzt wirdvalue="descending"
alles nur Beispiele, im Prinzip geht es darum
je nach dem, welche Auswahl im ersten DropDown Feld getroffen wird
soll dazu einen Standard für das zweite DropDown Feld gesetzt werden
in diesem Beispiel so:
Price --> ascending ... (kleinere Preise zuerst)
Score --> descending ... (größter Wert zuerst)
Name --> ascending ... (von A bis Z)
Datum --> descending ... (neue zuerst)
... ohne die Seite dazu neu zu laden, also mit jQuery
hier mein BSP Code (Ausschnitt aus meinem Formular)
... Sortierung nach: <select name="sortby"> <option value="Score" selected="selected" style="background:#33FFAA;">Rank</option> <option value="Price">Preis</option> <option value="ProductName">Name</option> <option value="LastImported">Datum</option> </select> Richtung: <select name="order"> <option value="ascending">aufsteigend</option> <option value="descending" selected="selected" style="background:#33FFAA;">absteigend</option> </select> ...
wie müsste eine jQuery Funktion dafür aussehen,
dass bei Auswahl vom User im ersten DropDown Feld
die "selected" Eigenschaft im zweiten Feld passend geändert wird ?
Danke
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ungetestet, aber so sollte es funktionieren...
<select id="sortby" name="sortby"> <option value="Score" selected="selected" style="background:#33FFAA;">Rank</option> <option value="Price">Preis</option> <option value="ProductName">Name</option> <option value="LastImported">Datum</option> </select> Richtung: <select id="order" name="order"> <option value="ascending">aufsteigend</option> <option value="descending" selected="selected" style="background:#33FFAA;">absteigend</option> </select> <script> $( "#sortby" ).val( function( index, value ) { switch (value) { case "Price": $( "#order" ).val( "ascending"); break; case "Score": $( "#order" ).val( "descending"); break; } }) </script> -
staymyfriends Lösung scheint bei mir nicht zu funktionieren aber ich habe seine leicht abgeändert:
Mit jQuery:
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { $("#sortby").change(function(){ switch(this.value){ case "Price": $("#order").val( "ascending"); break; case "Score": $("#order").val( "descending"); break; } }) }); </script> </head> <body> <select id="sortby" name="sortby"> <option value="Score" selected="selected">Rank</option> <option value="Price">Preis</option> <option value="ProductName">Name</option> <option value="LastImported">Datum</option> </select> Richtung:<select id="order"> <option value="ascending">aufsteigend</option> <option value="descending" selected="selected">descending</option> </select> </body> </html>
Ohne jQuery (vanilla JS):
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <meta charset="UTF-8"> <script> window.onload = function(){ document.getElementById('sortby').addEventListener("change", function(){ order = document.getElementById("order"); switch(this.value){ case "Price": order.value = "ascending"; break; case "Score": order.value = "descending"; break; } }); } </script> </head> <body> <select id="sortby" name="sortby"> <option value="Score" selected="selected">Rank</option> <option value="Price">Preis</option> <option value="ProductName">Name</option> <option value="LastImported">Datum</option> </select> Richtung:<select id="order"> <option value="ascending">aufsteigend</option> <option value="descending" selected="selected">descending</option> </select> </body> </html>
Beitrag zuletzt geändert: 12.11.2014 19:15:59 von c143 -
Oder man macht das ganze einfacher lesbar und erweiterbar.
An einer solchen Stelle ist es unnötig sinnlose Switch-case Konstrukte aufzubauen, zumal diese pro neue Option mindestens 3 Zeilen schwerer lesbaren Code verursachen.
Darum biete ich eine - für mich und meinen Erfahrungen - bessere Umsetzung an:
$(function() { var sortOrderMap = { Score: 'ascending', Price: 'descending', ProductName: 'ascending', LastImported: 'descending' }; $('#sortby').change(function() { var order = sortOrderMap[this.value]; if ( typeof order !== 'undefined' ) { $('#order').val(order); } }); }); -
copynpaste schrieb:
Jain.
Oder man macht das ganze einfacher lesbar und erweiterbar.
An einer solchen Stelle ist es unnötig sinnlose Switch-case Konstrukte aufzubauen, zumal diese pro neue Option mindestens 3 Zeilen schwerer lesbaren Code verursachen.
switch(this.value){ case "Price": case "LastImported": $("#order").val( "ascending"); break; default: $("#order").val( "descending"); break; }
In diesem Fallgibt es nur ascending oder descending. Es ist genau so gut lesbar bzw erweiterbar durch eine Zeile, nicht drei. Mit meiner Lösung durch default muss auch nur ascending bestimmt werden, da er ja als Standard descending haben möchte.
Also sind es schlussendlich sogar weniger Zeilen. :P
Aber deine Lösung mit dem Array ist echt auch super. Für jedermann erweiterbar, da es eine einfache Gestaltung hat. Aber wer sich ein kleines bisschen auskennt, kann auch diese Lösung ganz simpel anpassen.
Ich persönlich mag deine Darstellung übrigens auch mehr und nutz cases so gut wie nie. Aber ich dachte, wenn staymyfriend schon einen Lösungsansatz hat, vollende ich den grade noch. :D
Beitrag zuletzt geändert: 13.11.2014 8:23:09 von c143 -
Hallo
Beispiel von copyandpaste funktioniert zwar
aber der TE wollte die "SortOrderMap" etwas anders ...
im Beispiel steht
var sortOrderMap = { Score: 'ascending', Price: 'descending', ProductName: 'ascending', LastImported: 'descending' };
der TE schreibt aber
Price --> ascending ... (kleinere Preise zuerst)
Score --> descending ... (größter Wert zuerst)
Name --> ascending ... (von A bis Z)
Datum --> descending ... (neue zuerst)
also dann so
var sortOrderMap = { Score: 'descending', Price: 'ascending', ProductName: 'ascending', LastImported: 'descending' };
siehe Beispiel auf jsfiddle: http://jsfiddle.net/ygmsqazk/ zum Test
PS ... was ist "vanilla JS" .... quasi "pure JS" ohne Framework wie jQuery o.ä. ?!
-
qualiuhr schrieb:Beispiel von copyandpaste funktioniert zwar
aber der TE wollte die "SortOrderMap" etwas anders ...
Ja ok war nur zum zeigen wie es funktionieren soll
PS ... was ist "vanilla JS" .... quasi "pure JS" ohne Framework wie jQuery o.ä. ?!
Genau Vanilla bedeutet praktisch ohne Plugins/Erweiterungen etc.
c143 schrieb:
In diesem Fallgibt es nur ascending oder descending. Es ist genau so gut lesbar bzw erweiterbar durch eine Zeile, nicht drei. Mit meiner Lösung durch default muss auch nur ascending bestimmt werden, da er ja als Standard descending haben möchte.
Ok an default hatte ich nicht gedacht, könnte man aber als else Zweig einbauen :P
Aber eben das ist auch das schwierige am Programmieren - viele Wege führen nach Rom, aber keiner ist der Beste und man muss selbst entscheiden welchen Weg man nimmt. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
