* Γνώση Υπολογιστών >> Προγραμματισμός > >> JavaScript Προγραμματισμός

Πώς να αλλάξετε ένα Drop -Down Δείκτης JavaScript

JavaScript σας δίνει τη δυνατότητα να αλλάξετε δυναμικά το περιεχόμενο στην οθόνη του browser του χρήστη , επειδή το σενάριο κατοικεί και τρέχει μέσα στο πρόγραμμα περιήγησης του χρήστη . Για παράδειγμα , μπορείτε να αλλάξετε την τιμή του δείκτη drop-down σε JavaScript με να πάρει τιμή του δείκτη του στοιχείου στο στοιχείο με τη μορφή ώστε να είναι εύκολο να τους αναφορά . Οδηγίες
Η 1

Δημιουργήστε μια ιστοσελίδα που θα επιτρέπουν στο χρήστη να παραγγείλετε αναλώσιμα και θα αλλάξει το όνομα του στοιχείου στο "Sold Out " , όταν δεν υπάρχουν πλέον αριστερά . Δημιουργήστε ένα έγγραφο HTML με το Notepad ή ένα πρόγραμμα επεξεργασίας HTML και να προσθέσετε τις κεφαλίδες HTML στο έγγραφο : < ! DOCTYPE HTML >

Προμήθειες

Παραγγελία < /title> 2 <br> < p > Προσθέστε κώδικα Javascript για να παρακολουθείτε την απογραφή και να αλλάξετε το όνομα του στοιχείου στο Sold Out , όταν η απογραφή πηγαίνει στο μηδέν . Προετοιμαστεί global μεταβλητές με το αρχικό απόθεμα για κάθε στοιχείο : <br> <p> <script> <br> <p> μολύβια var = 5 ? <br> <p> Var χαρτί = 5 ? <br> <p> Var συρραπτικά = 5 ? <br> εικόνων 3 <p> Δημιουργήστε μια λειτουργία JavaScript που παίρνει το στοιχείο που επιλέγεται όταν ο χρήστης κάνει κλικ σε ένα κουμπί εντολής . Χρησιμοποιήστε το " selectedIndex " περιουσία για να πάρει το δείκτη στοιχείου και το "κείμενο" ακίνητο για να πάρει το όνομά του : <br> <p> προκειμένου λειτουργία () { <br> <p> δείκτη var = document.supplies.items.selectedIndex ? <br> στοιχεία var <p> = document.supplies.items [ index ] κείμενο ? <br> Η <p> 4 Ορίστε μια σημαία που δείχνει ένα στοιχεία είναι sold out σε . " ψευδή : " <br> < p > var SOLDOUT = false ? <br> 5 <p> να ελαττώσει την απογραφή για το επιλεγμένο στοιχείο . Εάν η απογραφή πέφτει στο μηδέν , αλλάξτε το κείμενο του δείκτη drop-down για να "Sold Out : " <br> <p> διακόπτη ( στοιχεία ) { <br> <p> περίπτωση " Μολύβι " : <br> <p> - μολύβια ? <br> <p> αν ( μολύβια == 0 ) SOLDOUT = true ? <br> <p> σπάσει? <br> <p> περίπτωση "χαρτί " : <br> <p> - χαρτί? < br > <p> αν ( χαρτί == 0 ) SOLDOUT = true ? <br> <p> σπάσει? <br> <p> περίπτωση " Συρραπτικό " : <br> <p> - συρραπτικά ? <br> <p> εάν ( συρραπτικά == 0 ) SOLDOUT = true ? <br> <p> σπάσει? . <br> <p> } <br> <p> αν ( SOLDOUT ) document.supplies.items [index ] text = " Sold Out " ? <br> <p> } <br> <p> < /script > <br> <p> < /head> <br> Η 6 <p> Δημιουργήστε τη μορφή HTML και να ορίσετε το όνομα θα χρησιμοποιούνται για την λειτουργία JavaScript . Δημιουργήστε το αναπτυσσόμενο πλαίσιο με την ετικέτα <select> και να χρησιμοποιήσετε το όνομα από τη λειτουργία JavaScript . Προσθέστε τα στοιχεία με την ετικέτα <option> και να προσθέσετε ένα κουμπί για να καλέσετε τη λειτουργία JavaScript : <br> <p> <body> <br> <p> <form name="supplies"> <br> < p> < επιλέξτε type = " κουμπί" name = " addtoorder " value = "Παραγγελία" onClick = " ώστε ( ) ? " > <br> <p> < /form> <br> <p> < /body> <br> <p> < /html > <br> Η <p> 7 Αποθηκεύστε το αρχείο HTML . Ανοίξτε σε ένα πρόγραμμα περιήγησης και να δοκιμάσουν τη λειτουργικότητα . <br> Η <br> εικόνων <div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="grad3"></div> </div> <div class="fanyedads"> <ul> <li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/90949.html' >Πώς να ενημερώσετε DIV </a> <li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/90951.html' >Πώς να καλέσετε JavaScript Από πρότυπο HTML </a> </ul> </div> </div> <div class="woqinimaderwr24"> <div class="dibud23"> <div class="biaotidas51"> <div class="biaotidas511"><h3>Συναφής σύστασή</h3></div> <div class="butudasda"></div> </div> </div> <div class="dibud24"> <div class="dibud241"> <ul class="dsa31das"> <li><a href="http://www.221021.com/Programming/javascript-programming/90857.html" target="_blank">Η λειτουργία Επιστροφή στην HTML κωδικοποίησης </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91209.html" target="_blank">Πώς να τρέξει ένα ρολόι σε μια σελίδα Web χρησιμοποιώντας Javascript </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90954.html" target="_blank">Πώς να δημιουργήσετε ένα Javascript Ticker </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90784.html" target="_blank">Βοήθημα για jQuery και το Google Maps </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91086.html" target="_blank">Πώς να αλλάξετε τον κωδικό Javascript για μια Aptiva IBM Υπολογιστών </a></li> </ul> </div> <div class="dibud242"> <div class="biaotidasoidasf3h4"> <h4>Τελευταία άρθρα</h4> <div class="nibushihenzaiyi"></div> </div> <ul class="thydghaodennrend"> <li><a href="http://www.221021.com/Programming/javascript-programming/90813.html" target="_blank">Πώς να πάρει πλάτος ενός στοιχείου στην Javascript </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90871.html" target="_blank">5 Χρήσεις JavaScript </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/91074.html" target="_blank">Πώς να ενσωματώσει μια σύνδεση σε AS2 </a></li> <li><a href="http://www.221021.com/Programming/javascript-programming/90928.html" target="_blank">Πώς να προσθέσετε μια υπερ-σύνδεση σε μια λεζάντα της LightBox </a></li> </ul> </div> </div> </div> <div class="dibudaohnagdsaw"> <div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div> </div> </div> </body> </html>