jQuery - select onchange zu slide-in / slide-out-div oder form

Ich versuche mich zu verbessern, eine form, indem er nur die relevanten Felder je nach Vorselektion über ein Formular wählen Sie Feld.

Ist es ein Bestellformular für die 3 Produkte und alle 3 Produkte haben einzigartige Eigenschaften.

Meine Idee war, alle ausblenden, den Inhalt in divs, dann zeigen die entsprechenden div, wenn das Produkt ausgewählt ist. Ich habe einige Lösungen gefunden, die zeigen /ausblenden eines div, aber nie mit animation. Es muss nicht eine Folie, sondern einfach etwas schönes!

Die alternative ist, anstatt enthüllt ein div, wäre das laden eines separaten form, aber das scheint unnötig.

Ich bin mir nicht sicher, ob ich ein plug-in, wie ich bin ziemlich neu bei jquery.

Was ich in den html-ist:

<style type="text/css">
.hide {
 display:none;
}

<select>
<option value="" >Please select product below</option>
<option value="pro1">Product 1</option>
<option value="pro2">Product 2</option>
</select>

<div id="pro1" class="hide" >Product 1</div>
<div id="pro2" class="hide" >Product 2</div>

Vielen Dank im Voraus

InformationsquelleAutor slayaz | 2010-04-14
  1. 1

    Können Sie das slideUp() und slideDown built-in Effekt.

    Oder einen der sonstigen built-in Effekte jQuery. http://api.jquery.com/category/effects/

    $(document).ready(function () {    
       $("#selectMenu").bind("change", function () {
        if ($(this).val() == "pro1") {
            $("#pro1").slideDown();
            $("#pro2").slideUp();
        }
        else if($(this).val() =="pro2") {
            $("#pro2").slideDown();
            $("#pro1").slideUp();
        }
    });
});

    HTML: 

    <select id="selectMenu"> 
    <option value="" >Please select product below</option> 
    <option value="pro1">Product 1</option> 
    <option value="pro2">Product 2</option> 
</select>
    • Nice one, das war so viel einfacher, als ich dachte, es wäre!
    InformationsquelleAutor Erikk Ross
  2. 0

    Können Sie die JQuery - animieren() Methode erstellen Sie Ihre eigenen Stile, Animationen, andere als die vordefinierten Animationen, wie sliding, fading, etc.

    InformationsquelleAutor Sarfraz
Schreibe einen Kommentar