[JavaScript] +[JQUERY] Verkettete Auswahlliste, neues Prob.

Dieses Thema im Forum "Webentwicklung" wurde erstellt von SoulOfRussia, 7. Juni 2011 .

Schlagworte:
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 7. Juni 2011
    +[JQUERY] Verkettete Auswahlliste, neues Prob.

    Hallo Leute,

    bevor ich euch wiedereinmal mit meinen Webentwicklungsfragen nerve, erstmal ein groooßess Dankeschön an all die, die mir die male davor geholfen haben :D

    Nun folgendes "Problem":

    HTML:
    <td width="300">Farbe: <br />
 <select name="farbe" size="1" value="<?PHP echo $_POST['farbe']; ?>" id="eingabe" class="farbe">
 <option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option>
 <option value="schwarz" >--------</option> 
</select>
 <script>
 function displayVals() {
 var colorValue = $(".folie").val();
 if ( colorValue == "normal"){ 
 $(document).ready(function(){
 $('.farbe').load('farben_normal.php'); 
 }); 
 }
 if ( colorValue == "metallic"){
 $(document).ready(function(){
 $('.farbe').load('farben_metallic.php'); 
 }); 
 } 
 if ( colorValue == "carbon"){
 $(document).ready(function(){
 $('.farbe').load('farben_carbon.php'); 
 }); }
 }

 $("select").change(displayVals);
 displayVals();
 
</script>
    Jetzt:
    Ich wähle mit einem <select><option> eine Folienart aus (hier, normal, metallic, carbon).
    Die Liste mit den Farben (farben_normal.php etc.) wird richtig in die <select> für die Farbauswahl geladen.

    Wenn ich nun aber eine andere Farbe auswählen möchte, lädt Js die Liste aus irgendeinem, mir nicht ersichtlichen, Grund neu, sodass es wieder auf den ersten Wert springt (z.b. weiß)


    Möchte:
    Man wählt eine Folienart aus, dazu wird die Liste der verfügbaren Farben geladen.
    Man wählt eine Farbe aus, und diese Farbe wird mit $_POST['farbe'] übergeben.

    hier nochmal die farben_normal.php (ich weiß, sollte lieber .html heißen, aber das is jetzt egal :p) als Beispiel:
    HTML:
     <option value="weiss" class="weiss">wei&szlig;</option>
 ... 
 <option value="dunkelblau" class="dunkelblau">dunkelblau</option>
    Danke im Vorraus
    Soul


    ______


    Ok.... Da waren wohl meine Finger schneller als mein Auge...

    $("select")... in $(".folie") geändert, nun gehts xD

    Sorry für den unnötigen Thread xD
    Könnte eventuell für jemand anders nützlich sein ;)

    __________________
    Anderes Problem:

    Der Code sieht jetzt so aus:
    <select name="farbe" size="1" value="<?PHP echo $_POST['farbe']; ?>" id="eingabe" class="farbe">
    <option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option>

    </select>

    <script>
    function displayVals() {
    var colorValue = $(".folie").val();
    if (colorValue == "normal"){
    $('.farbe').load('farben_normal.php');
    }
    if (colorValue == "metallic"){
    $('.farbe').load('farben_metallic.php');
    }
    if (colorValue == "carbon"){
    $('.farbe').load('farben_carbon.php');
    }
    }

    $(".folie").change(displayVals);
    displayVals();

    </script>

    wenn man nun eine Folienart auswählt, wird zwar alles richtig geladen, aber wenn man Submittet wird die Zeile
    "<option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option>"
    gelöscht und mit der neuen Liste ersetzt...
    gibt es eine Möglichkeit, dass Js diese Zeile nicht weghaut, sondern immer nur die Listen neu lädt?
     
    + Multi-Zitat Zitieren

  3. Anzeige
    Dealz: stark reduzierte Angebote finden.
  4. #2 7. Juni 2011
    AW: +[JQUERY] Verkettete Auswahlliste, neues Prob.

    Du kannst das option-Element einfach vorher klonen (jQuery / DOM) und diesen Klon am Ende der displayVals-Funktion wieder in das select-Element einfügen (jQuery / DOM). Oder du erstellst das option-Element einfach jedes Mal am Ende der Funktion neu.



    Das select-Element solltest du lieber mit einer ID ansprechen, statt mit einer Klasse, da du es ja eindeeutig identifizieren willst.



    PHP:
    <? PHP  echo   $_POST [ 'farbe' ];  ?>
    Sowas ist ungefiltert anfällig für XSS!
     
    + Multi-Zitat Zitieren
  5. #3 8. Juni 2011
    AW: +[JQUERY] Verkettete Auswahlliste, neues Prob.

    hab kein plan wie du das meinst!?!?! :/

    so ca.?

    <script>

    function displayVals() {
    var colorValue = $("#folie").val();
    if (colorValue == "normal"){
    $('#farbe').load('farben_normal.php');
    }
    if (colorValue == "metallic"){
    $('#farbe').load('farben_metallic.php');
    }
    if (colorValue == "carbon"){
    $('#farbe').load('farben_carbon.php');
    }

    }

    $("#folie").change(displayVals);
    displayVals();
    $('#farbe').prepend('<option value="<?php echo $farbe; ?>" class="<?php echo $farbe; ?>"><?php echo $farbe; ?></option> ');

    </script>

    Der fügt das <option.....</option> nicht in die <select>...
    mache ich es in einem <p id="farbe_p"> </p> dann funktioniert es -.-


    am besten wäre es, wenn ich über load() zuätzlich die $farbe übergeben lasse...
    AJAX?
     
    + Multi-Zitat Zitieren
  6. #4 8. Juni 2011
    AW: +[JQUERY] Verkettete Auswahlliste, neues Prob.

    Hab ich mal schnell erstellt so sollte das normale submit event abgefangen werden und in das div gepostet werden ohne das die ganze seite neu geladen wird


    HTML:
     //On Submitting
 $("#FORM-ID").submit(function(e){ /* catch the form's submit event */
 e.preventDefault(); /* stop the standart submit event from the browser */
 $.ajax({ /* create an AJAX call */
 data: $(this).serialize(), /* get the form data */
 type: $(this).attr("method"), /* GET or POST */
 url: $(this).attr("action"), /* the file to call */
 success: function(response) { /* on success.. */
 $("#result").html(response); /* write response into div "result" */
 return;
 }
 });
 return false; /* cancel original event to prevent form submitting */
 });

    "$("#result").html(response);" kannst du ja jetzt ersetzen mit dem was du auch immer mit dem submit machen willst ^^
     
    + Multi-Zitat Zitieren

  7. Videos zum Thema
Auf dieses Thema antworten
Die Seite wird geladen...
Similar Threads - JavaScript JQUERY Verkettete
  1. t001

    Suche nach href mittels Javascript und jquery

    t001 , 22. August 2015 , im Forum: Webentwicklung
    Antworten:
    9
    Aufrufe:
    1.408
    Nanobyte
    29. August 2015
  2. Snarkoon

    Javascript + JQuery Progressbar value mehrfach durch if reduzieren

    Snarkoon , 29. August 2013 , im Forum: Webentwicklung
    Antworten:
    2
    Aufrufe:
    1.222
    Snarkoon
    31. August 2013
  3. romestylez

    [JavaScript] jQuery: countdown.js in Template

    romestylez , 30. Juli 2013 , im Forum: Webentwicklung
    Antworten:
    5
    Aufrufe:
    974
    Murdoc
    30. Juli 2013
  4. icke-sein

    [JavaScript] jQuery Scrollbar einbinden

    icke-sein , 14. Mai 2013 , im Forum: Webentwicklung
    Antworten:
    1
    Aufrufe:
    1.298
    DerEntscheider
    16. Mai 2013
  5. LondonMinistry

    [JavaScript] Ajax jQuery: Content aus html laden

    LondonMinistry , 29. April 2013 , im Forum: Webentwicklung
    Antworten:
    6
    Aufrufe:
    1.618
    LondonMinistry
    1. Mai 2013

  • Annonce

  • Annonce

Toggle Width