<option>

רכיב הדפדפן המובנה <option> מאפשר לרנדר אפשרות בתוך תיבת <select>.

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

Reference
- <option>
שימוש
- הצגת תיבת select עם אפשרויות

Reference

`<option>`

רכיב הדפדפן המובנה <option> מאפשר לרנדר אפשרות בתוך תיבת <select>.

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

ראו דוגמאות נוספות בהמשך.

Props

<option> תומך בכל מאפייני האלמנט הנפוצים.

בנוסף, <option> תומך ב-props האלה:

disabled: ערך בוליאני. אם true, לא ניתן יהיה לבחור באפשרות והיא תוצג מעומעמת.
label: מחרוזת. מציינת את משמעות האפשרות. אם לא הוגדרה, ישמש הטקסט שבתוך האפשרות.
value: הערך שישמש בעת שליחת טופס ה-<select> ההורה אם האפשרות הזו נבחרה.

Caveats

React לא תומכת במאפיין selected על <option>. במקום זאת, העבירו את ה-value של האפשרות ל-<select defaultValue> של ההורה עבור select לא נשלט, או ל-<select value> עבור select נשלט.

שימוש

הצגת תיבת select עם אפשרויות

רנדרו <select> עם רשימת קומפוננטות <option> בתוכו כדי להציג תיבת select. תנו לכל <option> ערך value שמייצג את הנתון שיישלח עם הטופס.

קראו עוד על הצגת <select> עם רשימת קומפוננטות <option>.

Fork

export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}

Previous<input>

Next<progress>