kostenloser Webspace werbefrei: lima-city


je Auswahl erstes Dropdown das zweite ändern ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    sparshops

    sparshops hat kostenlosen Webspace.

    Hallo

    wie kann ich es machen,
    wenn der User im ersten DropDown das Element mit
    value="Price"
    auswält,
    dass dann im zweiten DropDown automatisch
    value="ascending"
    gesetzt wird

    aber wenn User
    value="Score"
    auswählt
    dass dann wieder
    value="descending"
    gesetzt wird

    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>
    
     &nbsp;&nbsp; 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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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>
     
     &nbsp;&nbsp; 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>
  4. 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
  5. 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);
            }
        });
    });
  6. copynpaste schrieb:
    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.
    Jain.

    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
  7. 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.ä. ?!
  8. 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 :thumb:

    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.
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!