Δεν "τρέχει" το dropdown menu!

bill@ki · 28 Σεπτεμβρίου 2011

Γεια σας παιδιά,

Εχω φτιάξει ένα δυναμικό dropdown μενού, και ενώ όταν το δοκιμάζω ανεξάρτητα από την ιστοσελίδα που θέλω να το προσθέσω δουλεύει άψογα, όταν βάλω τον κώδικα στη σελίδα δουλεύει μόνο η πρώτη επιλογή που έχω ορίσει να δείχνει. Ποιο αναλυτικα όποιο chapter και να επιλέξω από το πρώτο μενού, μου εμφανίζει πάντα τις exercise 1 εως 12 στο άλλο μενού. Εχω την εντύπωση ότι δεν μου αναγνωρίζει το script αρχείο. Αλλα όσο και να προσπάθησα δεν κατάφερα κάτι. Μπορεί κανείς να μου δώσει τα φώτα του που να κινηθώ; Τι να προσέξω;

Ευχαριστώ

Το εξωτερικό αρχειο .js που δημιουργησα είναι αυτό:

>function setOptions(o)
{ 
var select2 = document.form1.select2; 
select2.options.length = 0; 
if (o == "1") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12'); 
} 
if (o == "2") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12'); 
} 
if (o == "3") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12');
select2.options[select2.options.length] = new Option('exercise 13'); 
select2.options[select2.options.length] = new Option('exercise 14'); 
select2.options[select2.options.length] = new Option('exercise 15');
select2.options[select2.options.length] = new Option('exercise 16'); 
select2.options[select2.options.length] = new Option('exercise 17');  
} 
if (o == "4") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12');
select2.options[select2.options.length] = new Option('exercise 13'); 
select2.options[select2.options.length] = new Option('exercise 14');   
} 
if (o == "5") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12');
select2.options[select2.options.length] = new Option('exercise 13'); 
select2.options[select2.options.length] = new Option('exercise 14');   
} 
if (o == "6") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12');
select2.options[select2.options.length] = new Option('exercise 13'); 
select2.options[select2.options.length] = new Option('exercise 14'); 
} 
if (o == "7") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
} 
if (o == "8") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
} 
if (o == "9") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12');
select2.options[select2.options.length] = new Option('exercise 13'); 
select2.options[select2.options.length] = new Option('exercise 14');   
} 
if (o == "10") 
{ 
select2.options[select2.options.length] = new Option('exercise 1'); 
select2.options[select2.options.length] = new Option('exercise 2');
select2.options[select2.options.length] = new Option('exercise 3'); 
select2.options[select2.options.length] = new Option('exercise 4'); 
select2.options[select2.options.length] = new Option('exercise 5'); 
select2.options[select2.options.length] = new Option('exercise 6');
select2.options[select2.options.length] = new Option('exercise 7'); 
select2.options[select2.options.length] = new Option('exercise 8'); 
select2.options[select2.options.length] = new Option('exercise 9'); 
select2.options[select2.options.length] = new Option('exercise 10');
select2.options[select2.options.length] = new Option('exercise 11'); 
select2.options[select2.options.length] = new Option('exercise 12'); 
} 
}

και ο κώδικας που προσθέτω στη σελίδα είναι:

>
<html>
<head>
<script type="text/javascript" src="xxx.js"> </script>
</head>
<body>
.
.
.
.
.
<div id = "right_menu">
       <table style="font-size:18px" align="center" width="auto" border="0">
          <tr>
          <td><p style="font-family:'Monotype Corsiva'" >chapter 
              <form name="form1"> 
              <select name="select1" size="1" onchange="setOptions(document.form1.select1.options[document.form1.select1.selectedIndex].value);"> 
                 <option value="1">chapter 1</option> 
                 <option value="2">chapter 2</option> 
                 <option value="3">chapter 3</option> 
                 <option value="4">chapter 4</option> 
                 <option value="5">chapter 5</option> 
                 <option value="6">chapter 6</option> 
                 <option value="7">chapter 7</option> 
                 <option value="8">chapter 8</option> 
                 <option value="9">chapter 9</option> 
                 <option value="10">chapter 10</option> 
                 </select> </p></td>
          </tr>
          <tr> </tr>
          <tr>
          <td><p style="font-family:'Monotype Corsiva'"  align="right">exercise  
              <select name="select2" size="1"> 
                 <option>exercise 1</option> 
                 <option>exercise 2</option>
                 <option>exercise 3</option>
                 <option>exercise 4</option>
                 <option>exercise 5</option>
                 <option>exercise 6</option>
                 <option>exercise 7</option>
                 <option>exercise 8</option>
                 <option>exercise 9</option>
                 <option>exercise 10</option>
                 <option>exercise 11</option>
                 <option>exercise 12</option> 
                 </select> 
              </form> </p>
          <p> </p></td>
          </tr>
          </table>
   </div><!--right_menu--> 
.
.
.
.
.
</body>

Uberalles_gr · 28 Σεπτεμβρίου 2011

Εμένα μου παίζει μια χαρά.

Μπορείς να γράψεις και αυτό στο Onchange

>
onchange="setOptions(this.value)"

Υ.Γ. Ο κώδικας που έχεις γράψει στην javascript function είναι απλά ΤΡΑΓΙΚΟΣ...

Υ.Γ.2 Μήπως έχεις μια φόρμα πιο πάνω και δεν την κλείνεις πριν ανοίξεις αυτή που βλέπουμε στον κώδικα που μας έδωσες;;

Y.Γ.3 Μήπως χρησιμοποιείς τα ονόματα των select και πουθενά αλλού;;;

Υ.Γ.4 Μπορεί να γίνει έτσι

>
function setOptions(o)
{ 
 var mydata = new Array("","6","12","13","7"); 

var select2 = document.form1.select2; 
	select2.options.length = 0;
 
for(i=1; i<mydata[counter]; i++)
{
	select2.options[select2.options.length] = new Option('exercise '+i); 	
}
}

bill@ki · 28 Σεπτεμβρίου 2011

Εμένα μου παίζει μια χαρά.

Μπορείς να γράψεις και αυτό στο Onchange
>
onchange="setOptions(this.value)"
Υ.Γ. Ο κώδικας που έχεις γράψει στην javascript function είναι απλά ΤΡΑΓΙΚΟΣ...

Υ.Γ.2 Μήπως έχεις μια φόρμα πιο πάνω και δεν την κλείνεις πριν ανοίξεις αυτή που βλέπουμε στον κώδικα που μας έδωσες;;

Y.Γ.3 Μήπως χρησιμοποιείς τα ονόματα των select και πουθενά αλλού;;;

Υ.Γ.4 Μπορεί να γίνει έτσι
>
function setOptions(o)
{ 
 var mydata = new Array("","6","12","13","7"); 

var select2 = document.form1.select2; 
	select2.options.length = 0;
 
for(i=1; i<mydata[counter]; i++)
{
	select2.options[select2.options.length] = new Option('exercise '+i); 	
}
}

Καταρχην, ευχαριστω φίλε για την απάντηση σου. Τελικά το λάθος ήταν ότι χρησιμοποιούσα ξανά τη λέξη "form1" ποιο πάνω στον κώδικα. Την άλλαξα και όλα καλά. Τώρα όσο αφορά το κώδικα που λες ότι είναι τραγικός, βρήκα ένα έτοιμο κομμάτι και απλά το προσάρμοσα στα μέτρα μου και αυτό είναι το αποτέλεσμα. Δεν είναι καλός επειδή επαναλαμβάνω ουσιαστικά τα ίδια πράγματα; Οι βελτιώσεις/αλλαγές που μου πρότεινες είναι για να φαίνεται καλύτερα ο κώδικας ή είναι πιο σωστός από αυτόν; Γενικά τώρα μαθαίνω κάποια πράγματα και πραγματικά προσπαθώ.

Υ.Γ Μπορώ να χρησιμοποιήσω και ελληνικούς χαρακτήρες στη συνάρτηση μέσα στα '....' αν θέλω να φτιάξω και ελληνικό μενου;

πχ select2.options[select2.options.length] = new Option('άσκηση 1');

Uberalles_gr · 29 Σεπτεμβρίου 2011

Καταρχάς φίλε μου ήμουν λίγο απότομος με την λέξη "τραγικός".

Γράφεις τόσες πολλές γραμμές κώδικα για κάτι που έφτιαξα τελείως πρόχειρα σε 5 γραμμές.

Και γλιτώνεις τόσες γραμμές κώδικα αλλά εάν στο μέλλον θες να προσθέσεις άλλη μία επιλογή μπορείς πολύ εύκολα.

Καλή η προσπάθεια σου αλλά θα πρέπει να έχεις στο μυαλό σου να γράφεις λίγο πιο "έξυπνα", δηλαδή εάν θες να βάλεις άλλη μία επιλογή όπως σου είπα και πιο πριν θα γράψεις 10 γραμμές κώδικα ενώ με τον δικό μου κώδικα θα πας στο τέλος του πίνακα και θα προσθέσεις απλώς έναν αριθμό.

Έχεις καταλάβει τι κάνει αυτός ο κώδικας που σου έγραψα; Είναι αρκετά απλός.

Να σημειώσω ότι ο κώδικας που σου έχω φτιάξει έχει σαν κριτήριο να ανεβούν όλα κατά 1, δλδ 1,2,3,4,5,6,7,8 και όχι 4,8,1,2,9,10,4...

Και βέβαια μπορείς να χρησιμοποιήσεις και Ελληνικούς χαρακτήρες αρκεί η σελίδα που γράφεις να είναι σε UTF-8.

Για ότι χρειαστείς μην διαστάσεις, εδώ είμαστε εμείς

bill@ki · 29 Σεπτεμβρίου 2011

φίλε το δέχομαι ότι ήσουν λίγο απότομος

Και για να επανέλθω στο θέμα όσο αφορά τον κώδικα που μου είπες έχω κάποιες απορίες (ίσως χαζες, αλλά ίσως και πολύ χαζές) .

1. στον πίνακα εγω θα δηλώσω τα 10 chapters; επίσης στο πχ τα βαζεις μέσα σε "" , ενώ οι αριθμοί δεν χωρίζονται μόνο με κόμμα;

2.τη μεταβλητη i δεν θα πρέπει να την δηλώσω στη συνάρτηση;

3. στη for το i<mydata[counter], η counter μετράει τις φορες που εκτελέστηκε η εντολή ξεκινώντας από 1 και αυξάνοντας κατά 1; δεν το πολυ κατάλαβα αυτό!

Uberalles_gr · 29 Σεπτεμβρίου 2011

φίλε το δέχομαι ότι ήσουν λίγο απότομος

Και για να επανέλθω στο θέμα όσο αφορά τον κώδικα που μου είπες έχω κάποιες απορίες (ίσως χαζες, αλλά ίσως και πολύ χαζές) .

1. στον πίνακα εγω θα δηλώσω τα 10 chapters; επίσης στο πχ τα βαζεις μέσα σε "" , ενώ οι αριθμοί δεν χωρίζονται μόνο με κόμμα;

Θα δηλώσεις όσα θες εσύ. Στο παράδειγμα σου ναι τα 10. Επειδή είναι αριθμοί μπορείς να βγάλεις τα "".

2.τη μεταβλητη i δεν θα πρέπει να την δηλώσω στη συνάρτηση;

Όχι

3. στη for το i<mydata[counter], η counter μετράει τις φορες που εκτελέστηκε η εντολή ξεκινώντας από 1 και αυξάνοντας κατά 1; δεν το πολυ κατάλαβα αυτό!

Υπάρχει λάθος στο κώδικα, κανονικά είναι function setOptions(counter), όπου ο counter είναι η επιλογή σου από το select. Έτσι, εάν διάλεξες την 5η επιλογή θα σου φέρει και την 5 τιμή από τον πίνακα mydata.

To for δουλεύειως εξής:

i=1, από ποια τιμή θα ξεκινήσει η μεταβλητή σου

i<mydata[counter], πότε θα σταματήσει να εκτελείται η λούπα σου, όσο δηλαδή το mydata[counter] είναι μεγαλύτερο από το i

i++, το βήμα της λούπας

bill@ki · 30 Σεπτεμβρίου 2011

καλημέρα,

Εχω διορθώσει τον κώδικα, αλλά το πρόβλημα είναι ότι "χάνει" ένα chapter

δηλ. chapter 1 = exercise 12

chapter 2 = exercise 17

chapter 3,4,5 = exercise 14

chapter 6,7 = exercise 9

chapter 8 = exercise 14

chapter 9 = exercise 12

και φυσικα το chapter 10 αγνοείται (το απόλυτο κενό). Τι κάνω λάθος;Μήπως πρέπει να αλλάξω κάτι στις φόρμες (που παρέθεσα στο πρώτο ποστ);

>
function setOptions(counter)
{ 
 var mydata = new Array(12,12,17,14,14,14,9,9,14,12); 
   
       var select2 = document.form1.select2; 
       select2.options.length = 0;
        
       for(i=1; i<=mydata[counter]; i++)
       {
               select2.options[select2.options.length] = new Option('exercise '+i);    
       }
}

dewn735 · 30 Σεπτεμβρίου 2011

To πρώτο Index του πίνακα είναι το 0 και όχι το 1, δηλαδή ξεκινάει από το mydata[0]. Επομένως, θα πρέπει να αλλάξεις το

>for(i=1; i<=mydata[counter]; i++)

σε

>for(i=0; i<mydata[counter]; i++)

bill@ki · 30 Σεπτεμβρίου 2011

To πρώτο Index του πίνακα είναι το 0 και όχι το 1, δηλαδή ξεκινάει από το mydata[0]. Επομένως, θα πρέπει να αλλάξεις το
>for(i=1; i<=mydata[counter]; i++)
σε
>for(i=0; i<mydata[counter]; i++)

φίλε μου το γνωρίζω αυτό που λες αλλα αυτό εχει σαν αποτέλεσμα να ξεκινάει η exercises απο 0. Εγω δεν θέλω κάτι τέτοιο αλλά από 1. το προβλημα ειναι ότι αν και εχω δηλώσει 10 πίνακες μου εμφανίζει τους 9, και τον 10ο κενό.

παιδια άκυρο. τι μπούφος θεε μου

ξεχασα να αλλάξω τους αριθμους της φορμας να ξεκιναει από 0. ελεοςς!

Σύνδεση

Δεν "τρέχει" το dropdown menu!

Προτεινόμενες αναρτήσεις

bill@ki

Uberalles_gr

bill@ki

Uberalles_gr

bill@ki

Uberalles_gr

bill@ki

dewn735

bill@ki

Αρχειοθετημένο

Σύνδεση