Ανανέωση Dropdown από άλλο Dropdown

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

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

Απάντηση
ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από ManosWdd » 31 Μαρ 2013 02:24

Καλησπέρα σε όλους! Προσπαθώ να φτιάξω μία φόρμα η οποία θα αποτελείτε από 2 dropdown lists. Το πρώτο θα έχει την υπηρεσιά και το δεύτερο θα εμφανίζει το προσωπικό της κάθε υπηρεσίας. Νομίζω είναι κάτι πολύ κοινό αλλά αυτή είναι η πρώτη μου επαφή με την javascript οπότε... Βρήκα ένα κομάτι κώδικα το οποίο προσπαθώ να επεξεργαστώ για να με φτάσω σε αυτό που θέλω. Το πρόβλημα είναι ότι μου εμφανίζει πάντα όλα τα items του δεύτερου dropdown. Μπορείτε να δείτε τον κωδικά στο παρακάτω link jsfiddle.net/mrtxR/.

Ευχαριστώ!
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από alou » 01 Απρ 2013 17:52

Στο παράδειγμά σου γίνονται υποτιθέμενα ajax calls - που σημαίνει ότι πας να ζητήσεις στοιχεία από μια βάση δεδομένων ή ένα αρχείο κλπ.

Αυτά εκεί λειτουργούν υποθετικά και από όσο κατάλαβα χωρίς λόγο. Σου γυρνάει πάντα το ίδιο γιατί οι τιμές που παίρνει είναι από το object doctors που φτιάχνεται στην αρχή, για να εξομοιώσει ένα ajax call (success true + values).

Εσύ πως θα παρουσιάζεις τα διάφορα drop down? θα είναι έτοιμα arrays ή όντως πρέπει να τα ζητήσεις από μια ΒΔ?

Αν είναι standard στοιχεία και απλά αλλάζουν βάση της προηγούμενης επιλογής, το αλλάζεις σε κάτι τέτοιο, είναι πολύ πιο απλό.

http://jsfiddle.net/44g4V/7/

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

var services = [];
services['doctors'] = ['mitsos', 'kitsos', 'pitsos'];
services['nurses'] = ['emanouela', 'euanthia', 'soula'];
services['stuff'] = ['litsa', 'pitsa', 'ritsa'];


jQuery(document).ready(function () {
    jQuery("#services").change(function () {
        var selectedService = $(this).val();
        $('#doctors').children().remove();
        jQuery.each(services[selectedService], function (ind, val) {
            $&#40;'#doctors'&#41;.append&#40;'<option value="' + ind + '">' + val + '</option>'&#41;;
        &#125;&#41;
    &#125;&#41;;
&#125;&#41;;

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

<select id="services">
    <option>Click to select a service</option>
    <option value="doctors">Service 1</option>
    <option value="nurses">Service 2</option>
    <option value="stuff">Service 3</option>
</select>
<hr>
<select id="doctors"></select>

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από ManosWdd » 02 Απρ 2013 02:04

Καλησπέρα και πάλι! Ευχαριστώ πολύ για την απάντηση! Ο κώδικας που μου έστειλες φαίνεται πολύ πιο απλός και το ίδιο λειτουργικός με αυτό που προσπαθώ να φτιάξω. Κατάφερα με αρκετή βοήθεια να φτάσω σε αυτό το αποτέλεσμα το οποίο με βοηθάει αρκετά γιατί θέλω με το που επιλεχθεί ο υπάλληλος να γίνει redirect στο προφίλ του.

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

// The data that the service should return
// JSFiddle will echo it back for us on that URL
var doctors = &#123;
    success&#58; true,
    doctors&#58; &#91;
        &#123;
            id&#58; 71,
            name&#58; "George"
        &#125;,
        &#123;
            id&#58; 72,
            name&#58; "James"
        &#125;
    &#93;
&#125;
var doctors1 = &#123;
    success&#58; true,
    doctors&#58; &#91;
        &#123;
            id&#58; 71,
            name&#58; "Georgess"
        &#125;,
        &#123;
            id&#58; 72,
            name&#58; "Jamessss"
        &#125;
    &#93;
&#125;
var doctors2 = &#123;
    success&#58; true,
    doctors&#58; &#91;
        &#123;
            id&#58; 71,
            name&#58; "Samm"
        &#125;,
        &#123;
            id&#58; 72,
            name&#58; "MArk"
        &#125;
    &#93;
&#125;

// This is what your JSON from PHP should look like



// Bind change function to the select
jQuery&#40;document&#41;.ready&#40;function&#40;&#41; &#123; 
    jQuery&#40;"#services"&#41;.change&#40;onServiceChange&#41;;
&#125;&#41;;

function onServiceChange&#40;&#41;
&#123;
    var serviceId = jQuery&#40;this&#41;.val&#40;&#41;; 
    if&#40;serviceId=='1'&#41;&#123;
        var jsonDoctors = JSON.stringify&#40;doctors&#41;;
console.log&#40;jsonDoctors&#41;;
    &#125;else if&#40;serviceId=='2'&#41;&#123;
        var jsonDoctors = JSON.stringify&#40;doctors1&#41;;
console.log&#40;jsonDoctors&#41;;
    &#125;else&#123;
         var jsonDoctors = JSON.stringify&#40;doctors2&#41;;
console.log&#40;jsonDoctors&#41;;
    &#125;
     $.ajax&#40;&#123;
        url&#58; '/echo/json/',
        type&#58; 'post',
        data&#58; &#123;
            serviceId&#58; serviceId,
            json&#58; jsonDoctors // jsFiddle echos this back to us
        &#125;,
        success&#58; onServicesRecieveSuccess,
        error&#58; onServicesRecieveError
    &#125;&#41;;
&#125;

function onServicesRecieveSuccess&#40;data&#41;
&#123;
    // Target select that we add the states to
    var jTargetSelect = jQuery&#40;"#doctors"&#41;;
    
    // Clear old states
    jTargetSelect.children&#40;&#41;.remove&#40;&#41;;
    
    // Add new states
    jQuery&#40;data.doctors&#41;.each&#40;function&#40;&#41;&#123;        
        jTargetSelect.append&#40;'<option value="'+this.id+'">'+this.name+'</option>'&#41;;
    &#125;&#41;;
&#125;

function onServicesRecieveError&#40;data&#41;
&#123;
    alert&#40;"Could not get services. Please try again."&#41;;
&#125;
Το url στο jsfiddle είναι: jsfiddle.net/pyvLj/.

Επίσης να κάνω μια ακόμα ερώτηση.. Πήρα τον κώδικα από το frame του jsfiddle όπου δουλεύει αυτό που έχω φτιάξει μέχρι τώρα και τον έβαλα σε ένα αρχειο .php(μόνο αυτός ο κώδικας, χώρις τίποτα άλλο) αλλά δεν δουλεύει. http://pastebin.com/1Em2Pcpw

Ευχαριστώ και πάλι!!
Εικόνα

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από ManosWdd » 02 Απρ 2013 05:08

Καλησπέρα και πάλι! Βασισμένος στον κώδικα του alou κατάφερα να γίνει η δουλειά μου! Ήταν πολύ πιο απλός από αυτό που βρηκα και επεξεργάστηκα και με λίγο διάβασμα(tutorials κτλ) έγραψα και το redirect! Μια τελευταία ερώτηση πάνω σε αυτό.. Στο παρακάτω κώδικα γίνεται το redirect και δουλέυει κανονικά:

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

    jQuery&#40;"#doctors"&#41;.change&#40;function &#40;&#41; &#123;
        var redirDoc = doctors.selectedIndex;
        location.href = 'http&#58;//www.website.com/our-services/' + doctors.options&#91;redirDoc&#93;.value;
    &#125;&#41;;
Εγώ θα ήθελα να κάνει redirect με τον παρακάτω τρόπο ώστε να είναι πιο λειτουργικά τα δεδομένα και να μην χρειάζεται να επαναλαμβάνω στο url variable το /our-services/service-name/item/name.

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

    jQuery&#40;"#doctors"&#41;.change&#40;function &#40;&#41; &#123;
        var redirServ = services.selectedIndex;
        var redirDoc = doctors.selectedIndex;
        location.href = 'http&#58;//www.website.com/our-services/' + services.options&#91;redirServ&#93;.value + 'item' + doctors.options&#91;redirDoc&#93;.value;
    &#125;&#41;;
Το δεύτερο κομμάτι κώδικα όμως δεν δουλεύει ενώ μου φαίνεται ότι είναι σωστό από τα πολύ λίγα που γνωρίζω από js.
Ευχαριστώ!
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από alou » 02 Απρ 2013 07:58

Δείξε όλο τον κώδικα - και την html - και πες πως θες να είναι τα url για να καταλάβουμε.

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από ManosWdd » 04 Απρ 2013 04:13

Καλησπέρα και πάλι. Ο κώδικας είναι ο εξής:

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

<select id="services"> 
    <option>Click to select a service</option> 
    <option value="service1">Service 1</option> 
    <option value="service2">Service 2</option> 
    <option value="service3">Service 3</option> 
</select> 
<hr> 
<select id="doctors"></select> 
Και η Javascript:

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

//<!&#91;CDATA&#91; 
$&#40;window&#41;.load&#40;function&#40;&#41;&#123;
var services = &#91;&#93;;

services&#91;'service1'&#93; = &#91;&#123; "name"&#58;"Giannis" , "url"&#58;"myurl.com" &#125;, &#123; "name"&#58;"Kostas" , "url"&#58;"myotherurl.com" &#125;, &#123; "name"&#58;"Fillipos" , "url"&#58;"myurl.com" &#125;&#93;;
    
services&#91;'service1'&#93; = &#91;&#123; "name"&#58;"Maria" , "url"&#58;"myurl.com" &#125;, &#123; "name"&#58;"Peter" , "url"&#58;"myotherurl.com" &#125;, &#123; "name"&#58;"Jack" , "url"&#58;"myurl.com" &#125;&#93;;

services&#91;'service3'&#93; = &#91;&#123; "name"&#58;"Dimitris" , "url"&#58;"myurl.com" &#125;, &#123; "name"&#58;"Takis" , "url"&#58;"myotherurl.com" &#125;, &#123; "name"&#58;"Gianna" , "url"&#58;"myurl.com" &#125;&#93;;    


jQuery&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
    jQuery&#40;"#services"&#41;.change&#40;function &#40;&#41; &#123;
        var selectedService = $&#40;this&#41;.val&#40;&#41;;
        $&#40;'#doctors'&#41;.children&#40;&#41;.remove&#40;&#41;;
        $&#40;'#doctors'&#41;.append&#40;'<option value="Null">Click to select a Doctor</option>'&#41;;
        jQuery.each&#40;services&#91;selectedService&#93;, function &#40;ind, val&#41; &#123;
            $&#40;'#doctors'&#41;.append&#40;'<option value="' + this.url + '">' + this.name + '</option>'&#41;;
        &#125;&#41;
    &#125;&#41;;
    
    jQuery&#40;"#doctors"&#41;.change&#40;function &#40;&#41; &#123;
        var redirServ = services.selectedIndex; 
        var redirDoc = doctors.selectedIndex; 
        location.href = 'http&#58;//www.website.com/our-services/' + services.options&#91;redirServ&#93;.value + '/item/' + doctors.options&#91;redirDoc&#93;.value; 
    &#125;&#41;;
    
&#125;&#41;;
&#125;&#41;;//&#93;&#93;>  
Μπορείς να το δείς και εδώ: jsfiddle.net/YJytH/.

Thanks!
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από alou » 04 Απρ 2013 18:38

Τα έχεις μπλέξει αρκετά και δεν το έκανες όπως σου είπα, έτσι πάντως στο 'μάζεψα' και δουλεύει. Το θέμα είναι να καταλάβεις τι κάνεις όμως, που δεν το βλέπω :/

Στα object γιαννης μακης κλπ στο url βάζεις το giannis.html δλδ το κομμάτι του url που αφορά μετά το .../items/ ή όπως είναι η διεύθυνση και στα values του κάθε service θα βάλεις το αντίστοιχο όνομα του url

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

<select id="services"> 
    <option>Click to select a service</option> 
    <option value="service1">Service 1</option> 
    <option value="service2">Service 2</option> 
    <option value="service3">Service 3</option> 
</select> 
<hr> 
<select id="doctors"></select> 

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


$&#40;window&#41;.load&#40;function&#40;&#41;&#123;
var services = &#91;&#93;;

services&#91;'service1'&#93; = &#91;&#123; "name"&#58;"Giannis" , "url"&#58;"myurl.com" &#125;, &#123; "name"&#58;"Kostas" , "url"&#58;"myotherurl.com" &#125;, &#123; "name"&#58;"Fillipos" , "url"&#58;"myurl.com" &#125;&#93;;
    
services&#91;'service2'&#93; = &#91;&#123; "name"&#58;"Maria" , "url"&#58;"myurl.com" &#125;, &#123; "name"&#58;"Peter" , "url"&#58;"myotherurl.com" &#125;, &#123; "name"&#58;"Jack" , "url"&#58;"myurl.com" &#125;&#93;;

services&#91;'service3'&#93; = &#91;&#123; "name"&#58;"Dimitris" , "url"&#58;"myurl.com" &#125;, &#123; "name"&#58;"Takis" , "url"&#58;"myotherurl.com" &#125;, &#123; "name"&#58;"Gianna" , "url"&#58;"myurl.com" &#125;&#93;;    


jQuery&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
    jQuery&#40;"#services"&#41;.change&#40;function &#40;&#41; &#123;
        var selectedService = $&#40;this&#41;.val&#40;&#41;;
        $&#40;'#doctors'&#41;.children&#40;&#41;.remove&#40;&#41;;
        $&#40;'#doctors'&#41;.append&#40;'<option value="Null">Click to select a Doctor</option>'&#41;;
        jQuery.each&#40;services&#91;selectedService&#93;, function &#40;ind, val&#41; &#123;
            $&#40;'#doctors'&#41;.append&#40;'<option value="' + this.url + '">' + this.name + '</option>'&#41;;
        &#125;&#41;
    &#125;&#41;;
    
    jQuery&#40;"#doctors"&#41;.change&#40;function &#40;&#41; &#123;
        var redirServ = $&#40;'#services option&#58;selected'&#41;.val&#40;&#41;;
        var thePersonObject = services&#91;redirServ&#93;;
        var goThere = thePersonObject&#91;0&#93;.url;
        location.href = 'http&#58;//www.website.com/our-services/' + redirServ + '/item/' + goThere; 
    &#125;&#41;;
    
&#125;&#41;;
&#125;&#41;;
http://jsfiddle.net/55atx/

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από ManosWdd » 07 Απρ 2013 04:58

Στο jsfiddle που μου έστειλες όταν επιλέξεις από το "Services 1" τον "Kostas", σε πηγαίνει στo url του "Giannis". :S

Γενικά αυτό που θέλω να κάνω είναι να γίνεται ένα redirect στο http://www.website.com/our-services/ser ... tem/kostas για παράδειγμα, όπου θα είναι το προφίλ του Κώστα στην κατηγορία "Service 1".

Ευχαριστώ και πάλι!
Εικόνα

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από alou » 07 Απρ 2013 10:47

http://jsfiddle.net/UrtU6/1/

Το url το βγάζω σε alert, για να λειτουργήσει εννοείται σβήνεις το alert και κάνεις unremark το location.href (βγάζεις τα //).

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


$&#40;window&#41;.load&#40;function&#40;&#41;&#123;
var services = &#91;&#93;;

services&#91;'service1'&#93; = &#91;&#123; "name"&#58;"Giannis" , "url"&#58;"giannis" &#125;, &#123; "name"&#58;"Kostas" , "url"&#58;"kostas" &#125;, &#123; "name"&#58;"Fillipos" , "url"&#58;"fillipos" &#125;&#93;;
    
services&#91;'service2'&#93; = &#91;&#123; "name"&#58;"Maria" , "url"&#58;"maria" &#125;, &#123; "name"&#58;"Peter" , "url"&#58;"peter" &#125;, &#123; "name"&#58;"Jack" , "url"&#58;"jack" &#125;&#93;;

services&#91;'service3'&#93; = &#91;&#123; "name"&#58;"Dimitris" , "url"&#58;"dimitris" &#125;, &#123; "name"&#58;"Takis" , "url"&#58;"takis" &#125;, &#123; "name"&#58;"Gianna" , "url"&#58;"gianna" &#125;&#93;;    


jQuery&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
    jQuery&#40;"#services"&#41;.change&#40;function &#40;&#41; &#123;
        var selectedService = $&#40;this&#41;.val&#40;&#41;;
        $&#40;'#doctors'&#41;.children&#40;&#41;.remove&#40;&#41;;
        $&#40;'#doctors'&#41;.append&#40;'<option value="Null">Click to select a Doctor</option>'&#41;;
        jQuery.each&#40;services&#91;selectedService&#93;, function &#40;ind, val&#41; &#123;
            $&#40;'#doctors'&#41;.append&#40;'<option value="' + this.url + '">' + this.name + '</option>'&#41;;
        &#125;&#41;
    &#125;&#41;;
    
    jQuery&#40;"#doctors"&#41;.change&#40;function &#40;&#41; &#123;
        var redirServ = $&#40;'#services option&#58;selected'&#41;.val&#40;&#41;;
        var thePersonObject = services&#91;redirServ&#93;;
        var goThere = $&#40;this&#41;.val&#40;&#41;;
        var fullurl = 'http&#58;//www.website.com/our-services/' + redirServ + '/item/' + goThere;
        alert&#40;fullurl&#41;;
        //location.href = fullurl;
    &#125;&#41;;
    
&#125;&#41;;
&#125;&#41;;

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Ανανέωση Dropdown από άλλο Dropdown

Δημοσίευση από ManosWdd » 07 Απρ 2013 17:51

Τέλεια! Δουλεύει όπως ακριβώς ήθελα! Ευχαριστώ πάρα πολύ και πάλι!!
Εικόνα

Απάντηση

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

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

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