3 תשובות
כדי ליצור רשימת בחירה בhtml, את יכולה להשתמש ב-<select>. בתוך ה<select>, את יכולה להשתמש ב-<option> כדי להגדיר כל אחת מהאפשרויות ברשימת הבחירה. לדוגמה:
<select>
<option value="recover">recover password</option>
<option value="leave">leave password unchanged</option>
</select>
כדי לטפל בבחירת המשתמש, את יכולה להשתמש ב-javascript כדי להתייחס לאירוע ב-<select>. כאשר אירוע זה מופעל, את יכולה לבדוק את הערך שנבחר ולהציג או להסתיר את הכפתורים המתאימים. הנה דוגמה כיצד תוכל לעשות זאת:
<html>
<body>
<select id="password-recovery-options">
<option value="recover">recover password</option>
<option value="leave">leave password unchanged</option>
</select>
<button id="reset-button" style="display:none">reset password</button>
<button id="send-button" style="display:none">send</button>
<script>
// get a reference to the <select> and <button> elements
var selectel = document.getelementbyid('password-recovery-options');
var resetbuttonel = document.getelementbyid('reset-button');
var sendbuttonel = document.getelementbyid('send-button');
// listen for the "change" event on the <select> element
selectel.addeventlistener('change', function() {
// check the selected value
if (this.value === 'recover') {
// show the reset button and hide the send button
resetbuttonel.style.display = 'block';
sendbuttonel.style.display = 'none';
} else {
// hide the reset button and show the send button
resetbuttonel.style.display = 'none';
sendbuttonel.style.display = 'block';
}
});
</script>
</body>
</html>
כאשר המשתמש בוחר "שחזר סיסמה" מרשימת הבחירה, כפתור האיפוס יוצג. כאשר המשתמש בוחר "להשאיר את הסיסמה ללא שינוי", כפתור השליחה יוצג במקום זאת.
<select>
<option value="recover">recover password</option>
<option value="leave">leave password unchanged</option>
</select>
כדי לטפל בבחירת המשתמש, את יכולה להשתמש ב-javascript כדי להתייחס לאירוע ב-<select>. כאשר אירוע זה מופעל, את יכולה לבדוק את הערך שנבחר ולהציג או להסתיר את הכפתורים המתאימים. הנה דוגמה כיצד תוכל לעשות זאת:
<html>
<body>
<select id="password-recovery-options">
<option value="recover">recover password</option>
<option value="leave">leave password unchanged</option>
</select>
<button id="reset-button" style="display:none">reset password</button>
<button id="send-button" style="display:none">send</button>
<script>
// get a reference to the <select> and <button> elements
var selectel = document.getelementbyid('password-recovery-options');
var resetbuttonel = document.getelementbyid('reset-button');
var sendbuttonel = document.getelementbyid('send-button');
// listen for the "change" event on the <select> element
selectel.addeventlistener('change', function() {
// check the selected value
if (this.value === 'recover') {
// show the reset button and hide the send button
resetbuttonel.style.display = 'block';
sendbuttonel.style.display = 'none';
} else {
// hide the reset button and show the send button
resetbuttonel.style.display = 'none';
sendbuttonel.style.display = 'block';
}
});
</script>
</body>
</html>
כאשר המשתמש בוחר "שחזר סיסמה" מרשימת הבחירה, כפתור האיפוס יוצג. כאשר המשתמש בוחר "להשאיר את הסיסמה ללא שינוי", כפתור השליחה יוצג במקום זאת.
שואל השאלה:
תודה! אבל איך אני מעבירה לעמוד html אחר בלחיצה על select? כאילו איך ואיפה אני מוסיפה את זה? סליחה על הבורות, לא הייתי מתי שהסבירו ואני לא מכירה מישהו שיכול להסביר לי :/
תודה! אבל איך אני מעבירה לעמוד html אחר בלחיצה על select? כאילו איך ואיפה אני מוסיפה את זה? סליחה על הבורות, לא הייתי מתי שהסבירו ואני לא מכירה מישהו שיכול להסביר לי :/
אנונימית
כדי לעבור לדף html אחר על ידי לחיצה על <select>, את יכולה להשתמש בשילוב של html, css ו-javascript. הנה דוגמה לאופן שבו תוכלי לעשות זאת:
<!-- html for the select element -->
<select id="page-select">
<option value="page1.html">page 1</option>
<option value="page2.html">page 2</option>
<option value="page3.html">page 3</option>
</select>
<!-- javascript to handle the change event and redirect the user to the selected page -->
<script>
document.getelementbyid("page-select").addeventlistener("change", function() {
// get the selected option's value
var selectedpage = this.value;
// redirect the user to the selected page
window.location = selectedpage;
});
</script>
בדוגמה זו, אנו מגדירים תחילה את <select> והאפשרויות שלו ב-html. אנחנו נותנים ל<select> תכונת id כדי שנוכל לפנות אליו בקלות ב-javascript. לכל <option> יש תכונה (value) המציינת את כתובת האתר של הדף שהוא מייצג. לאחר מכן, אנו משתמשים ב-javascript כדי להוסיף מאזין אירועים ל<select>. מאזין זה מופעל בכל פעם שהמשתמש משנה את האפשרות שנבחרה ב<select>. כאשר האירוע מופעל, קוד javascript מקבל את תכונת הערך של האפשרות שנבחרה ומשתמש בה כדי להפנות את המשתמש לעמוד המתאים. את יכולה להוסיף קוד זה לכל דף html שבו את רוצה שיהיה לך <select> המאפשר למשתמש לנווט לדפים שונים. רק תקפידי להחליף את כתובות האתרים בתכונות הערך של <option> עם כתובות האתרים של הדפים שאליהם ברצונך לקשר.
<!-- html for the select element -->
<select id="page-select">
<option value="page1.html">page 1</option>
<option value="page2.html">page 2</option>
<option value="page3.html">page 3</option>
</select>
<!-- javascript to handle the change event and redirect the user to the selected page -->
<script>
document.getelementbyid("page-select").addeventlistener("change", function() {
// get the selected option's value
var selectedpage = this.value;
// redirect the user to the selected page
window.location = selectedpage;
});
</script>
בדוגמה זו, אנו מגדירים תחילה את <select> והאפשרויות שלו ב-html. אנחנו נותנים ל<select> תכונת id כדי שנוכל לפנות אליו בקלות ב-javascript. לכל <option> יש תכונה (value) המציינת את כתובת האתר של הדף שהוא מייצג. לאחר מכן, אנו משתמשים ב-javascript כדי להוסיף מאזין אירועים ל<select>. מאזין זה מופעל בכל פעם שהמשתמש משנה את האפשרות שנבחרה ב<select>. כאשר האירוע מופעל, קוד javascript מקבל את תכונת הערך של האפשרות שנבחרה ומשתמש בה כדי להפנות את המשתמש לעמוד המתאים. את יכולה להוסיף קוד זה לכל דף html שבו את רוצה שיהיה לך <select> המאפשר למשתמש לנווט לדפים שונים. רק תקפידי להחליף את כתובות האתרים בתכונות הערך של <option> עם כתובות האתרים של הדפים שאליהם ברצונך לקשר.
באותו הנושא: