Εμφανιση select απο αλλη select

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
NDH
Δημοσιεύσεις: 403
Εγγραφή: 03 Φεβ 2009 13:56
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από NDH » 28 Νοέμ 2014 12:38

Γεια σας θα ηθελα την βοηθια σας , εχω κανει τον παρακατω κωδικα αλλα δουλευει οπως νανε ... θελω οταν επιλεγω απο την κατηγορια το option 1 να βγαζει την αντίστοιχη select αλλα να μην εχει απλος hidden τις αλλες γιατι θα εχου ολες οι υπο κατηγοριες ιδιο ονομα και μετα θα μπλεξει το php μου οταν θα λαμβανει δεδομενα...

Κώδικας: Επιλογή όλων

<label>Categorie&#58; </label>
                        <div class="formRight">
                            <div class="span4">
                            <select name="cat" onchange="optionCheck&#40;&#41;" id="options">
                            <option value="0">Dialekste</option>
                            <option value="1">upokatigoria1</option>
                            <option value="2">upokatigoria2</option>
                            </select>
                            </div> 
                        </div><br><br>
                        <script type="text/javascript">
    function optionCheck&#40;&#41;&#123;
        var option = document.getElementById&#40;"options"&#41;.value;
        
        if&#40;option == "1"&#41;&#123;
           document.write&#40;'<div class="formRight" ><label>upokatigoria1&#58; </label><div class="span4"><select name="subcat"><option value="1">Option1</option><option value="2">Option2</option></select></div></div><br><br>'&#41;;
        &#125;
        if&#40;option == "2"&#41;&#123;
           document.write&#40;'<div class="formRight" ><label>upokatigoria2&#58; </label><div class="span4"><select name="subcat"><option value="1">Option1</option><option value="2">Option2</option></select></div></div><br><br>'&#41;;
        &#125;
    &#125;
</script>
δοκιμασα και αυτο αλλα δεν μου κανει γιατι κανει απλα hide + οτι αφηνει κενα εκει που ειναι να εμφανιστουν οι υποκατηγοριες ...

Κώδικας: Επιλογή όλων

<label>Categorie&#58; </label>
                        <div class="formRight">
                            <div class="span4">
                            <select name="cat" onchange="optionCheck&#40;&#41;" id="options">
                            <option value="0">Dialekste</option>
                            <option value="1">Subcat1</option>
                            <option value="2">Subcat2</option>
                            </select>
                            </div> 
                        </div><br><br>
                        
                        
                        <div class="formRight" id="subcat1" style=visibility&#58;hidden >
                        <label>Subcat1&#58; </label>
                            <div class="span4">
                            <select name="subcat">
                            <option value="1">Option1</option>
                            <option value="2">Option2</option>
                            </select></div> 
                        </div><br><br>
                        <div class="formRight" id="subcat2" style="visibility&#58;hidden;" >
                        <label>Subcat2&#58; </label>
                            <div class="span4">
                            <select name="subcat">
                            <option value="1">Option1</option>
                            <option value="2">Option2</option>
                            </select></div> 
                        </div><br><br>









<script type="text/javascript">
    function optionCheck&#40;&#41;&#123;
        var option = document.getElementById&#40;"options"&#41;.value;
        if&#40;option == "0"&#41;&#123;
            document.getElementById&#40;"subcat1"&#41;.style.visibility ="hidden";
            document.getElementById&#40;"subcat2"&#41;.style.visibility ="hidden";
        &#125;
        if&#40;option == "1"&#41;&#123;
            document.getElementById&#40;"subcat1"&#41;.style.visibility ="visible";
            document.getElementById&#40;"subcat2"&#41;.style.visibility ="hidden";
        &#125;
        if&#40;option == "2"&#41;&#123;
            document.getElementById&#40;"subcat2"&#41;.style.visibility ="visible";
            document.getElementById&#40;"subcat1"&#41;.style.visibility ="hidden";
        &#125;
    &#125;
</script>

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από giannis17 » 28 Νοέμ 2014 13:18

για να κάνεις αυτό που λες χρειάζεσαι ajax. Ένα αρχείο που θα επιστρέφει το καινούριο select και λίγο javascript που θα στέλνει την επιλογή από το 1ο select και στο εν λόγω αρχείο και θα γράφει το αποτέλεσμα στο DOM.

επίσης εξέτασε το ενδεχόμενο να ασχοληθείς με την jQuery, απλουστεύει και ελαχιστοποιεί αρκετά τον κώδικα. Για παράδειγμα η function σου μπορεί να γραφτεί έτσι σε jQuery:

Κώδικας: Επιλογή όλων

 function optionCheck&#40;&#41;&#123;
        switch&#40;$&#40;'#options'&#41;.val&#40;&#41;&#41;&#123;
          case "0"&#58;
            $&#40;'#subcat1, #subcat2'&#41;.hide&#40;&#41;;
            break;
          case "1"&#58;
            $&#40;'#subcat1'&#41;.show&#40;&#41;;
            $&#40;'#subcat2'&#41;.hide&#40;&#41;;
            break;
          case "2"&#58;
            $&#40;'#subcat1'&#41;.hide&#40;&#41;;
            $&#40;'#subcat2'&#41;.show&#40;&#41;;
            break;
        &#125;
    &#125;
Μερικά παραδείγματα να διαβάσεις: post ajax με jquery
παράδειγμα χρήσης jquery ajax με php

Αν το περιεχόμενο σου είναι στατικό και δεν το τραβάς από κάποια βάση μπορείς να δουλέψεις και χωρίς php απλά με ένα ajax get χωρίς παραμέτρους στο html που θα έχει μέσα το select που θες (if πριν το ajax και δυναμικό target).

Επίσης μη σε μπερδεύει το παράδειγμα με το json, αυτό χρειάζεται όταν θες να πάρεις μόνο δεδομένα χωρίς δομή, ένα απλό echo ή ακόμα και σκέτο html αρκεί.
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

NDH
Δημοσιεύσεις: 403
Εγγραφή: 03 Φεβ 2009 13:56
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από NDH » 28 Νοέμ 2014 13:32

στατικο ειναι το περιεχομενο αλλα μετα θα το παρει η php και θα παρει τα δεδομενα απο την φορμα αλλα και αυτο που εκανες hide δεν κανει μονο?

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από giannis17 » 28 Νοέμ 2014 13:48

δεν σου έγραψα την λύση, έγραψα την ίδια function με την δική σου σε jquery και με switch αντί για if.

αν τελικά το κάνεις με jquery ajax μέσα στο case 0 θα βάλεις να κάνει clear το element με τα subcats, μπορείς να φτιάξεις ένα <div id="subcats"> και η εντολή για να το αδειάσεις είναι $('#subcats').empty();

αντίστοιχα μέσα στα case 1 και 2 θα πρέπει να μπούνε 2 ajax request (get εφόσον δεν έχεις δυναμικό περιεχόμενο) και θα φτιάξεις 2 html αρχεία ένα για κάθε subcat select (χωρίς head,body κλπ) και το data που θα γυρνάνε θα το κάνεις:

$('#subcats').empty(); //πάλι αδειάζεις σε περίπτωση που αλλάξει επιλογή να σβήσει το παλιό select
$('#subcats').append(data);
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

NDH
Δημοσιεύσεις: 403
Εγγραφή: 03 Φεβ 2009 13:56
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από NDH » 28 Νοέμ 2014 13:56

δεν εχω τρελη επαφη με το jquery αλλα θα προσπαθησω sorry αν οι ερωτησεις μου ειναι καπως...

NDH
Δημοσιεύσεις: 403
Εγγραφή: 03 Φεβ 2009 13:56
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από NDH » 28 Νοέμ 2014 14:02

Επισης αν εχεις χρονο και ορεξη βοηθα λιγο με το θεμα μου γιατι μαλλον παω για την ανακαλυψη του τροχου μονος μου ...

NDH
Δημοσιεύσεις: 403
Εγγραφή: 03 Φεβ 2009 13:56
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από NDH » 28 Νοέμ 2014 15:02

Βρηκα ενα τελειο παραδειγμα μετα απο παρα πολυ googlarisma http://www.formget.com/jquery-select-change/

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από giannis17 » 28 Νοέμ 2014 15:42

γίνεται με πολλούς τρόπους. δυστυχώς τώρα είμαι λίγο πνιγμένος. μπορώ να το κάνω το απόγευμα
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από korgr » 28 Νοέμ 2014 15:45

NDH έγραψε:γιατι μαλλον παω για την ανακαλυψη του τροχου μονος μου ...
Δεν έχει κανένα κακό η ανακάλυψη του τροχού στον προγραμματισμό, γιατί είναι από τις πιο αξιόπιστες μεθόδους να εμπεδώσεις γνώση που οι έτοιμοι κώδικες δεν θα σου δώσουν!
Τελείως φιλικά :)

NDH
Δημοσιεύσεις: 403
Εγγραφή: 03 Φεβ 2009 13:56
Επικοινωνία:

Εμφανιση select απο αλλη select

Δημοσίευση από NDH » 28 Νοέμ 2014 16:55

συμφωνω απολυτα απλα το συγκεκριμενο με εκαιγε λιγο βεβαια το εφτιαξα βαση του παραδειγματος που βρηκα παραπανω
Ευχαριστω παντως για ολα ! :D

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες