وثائق HTML قابلة للتشغيل: القائمة المنسدلة

Q: كيف أنشئ قائمة منسدلة في HTML؟

استخدم مع لكل خيار: Red Blue . أعطِ select اسم name و .

Q: كيف أحدد الخيار الافتراضي في select؟

أضف selected إلى ذلك الخيار: Blue . من دونها يكون الخيار الأول هو المحدد. وفي JavaScript اضبط select.value = 'blue'.

Q: كيف أضيف نصًا توضيحيًا (placeholder) إلى select؟

اجعل الخيار الأول فارغًا وغير قابل للاختيار: Choose a country . وأضف required إلى كي لا يُرسل النموذج حتى يُختار خيار حقيقي.

Q: كيف أحصل على القيمة المختارة في select بـ JavaScript؟

select.value هي قيمة الخيار المحدد. ولنصه الظاهر استخدم select.selectedOptions[0].text، واستمع إلى حدث change لتستجيب عند تغيّر الاختيار. وفي select المتعدد، مرّ على select.selectedOptions.

Q: ما الفرق بين select وdatalist؟

لا يسمح إلا بالخيارات المدرجة. أما مع فيقترح خيارات أثناء الكتابة لكنه يقبل أي نص. استخدم select حين يجب أن تكون الإجابة أحد خياراتك.

كيف تنشئ قائمة منسدلة في HTML

القائمة المنسدلة عنصر <select> فيه <option> لكل خيار. قيمة value لكل خيار هي ما يرسله النموذج، والنص بين الوسمين هو ما يراه القارئ. اختر واحدًا واضغط Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

يرسل النموذج language=js: اسم select name وقيمة الخيار المختار value. selected تحدد الخيار الافتراضي، ومن دونها يُختار الخيار الأول. وإذا لم يكن للخيار value، يُرسل نصه بدلًا منها.

اربط التسمية بـ select عبر for وid (أو بإحاطتها به) كي ينقل النقر على التسمية التركيز إلى القائمة المنسدلة وتعلن عنها قارئات الشاشة.

سمات select وoption

العنصر	السمة	وظيفتها
`<select>`	`name`	المفتاح الذي تُرسل القيمة تحته
`<select>`	`required`	يجب اختيار خيار حقيقي، لا الخيار الأول الفارغ
`<select>`	`multiple`	يمكن اختيار عدة خيارات
`<select>`	`size`	عدد الصفوف الظاهرة (يحوّلها إلى صندوق قائمة)
`<select>`	`disabled`	القائمة كلها متوقفة ولا تُرسل
`<option>`	`value`	ما يُرسل حين يُختار
`<option>`	`selected`	مختار عند تحميل الصفحة
`<option>`	`disabled`	ظاهر لكن لا يمكن اختياره
`<optgroup>`	`label`	عنوان المجموعة

خيار العنصر النائب مع required

القائمة المنسدلة لها قيمة دائمًا، لذلك من دون خيار نائب يُرسل أول خيار حقيقي حتى لو لم يلمس القارئ القائمة أبدًا. الخيار الأول الفارغ يصلح ذلك، وrequired تمنع الإرسال حتى يُختار خيار حقيقي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

اضغط Continue قبل الاختيار: يرفض المتصفح ويطلب منك اختيار عنصر. الخيار النائب يحمل value=""، وهذا ما تعدّه required فارغًا، وdisabled كي لا يمكن اختياره مجددًا بعد اختيار دولة.

تجميع الخيارات بـ optgroup

<optgroup label="..."> تضع عنوانًا فوق مجموعة من الخيارات. العنوان لا يمكن اختياره:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

لا يمكن تداخل المجموعات: للقائمة مستوى واحد من العناوين، لا أكثر. وdisabled على <optgroup> تعطّل كل الخيارات فيها.

الاختيار المتعدد

multiple تتيح للقارئ اختيار عدة خيارات، وتحوّل القائمة المنسدلة إلى صندوق قائمة. اضغط مطولًا على Ctrl (أو Cmd في Mac) لإضافة الخيارات واحدًا واحدًا، أو على Shift لاختيار نطاق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

يرسل النموذج skills=html وskills=css: الاسم نفسه مرة لكل خيار مختار. كثيرون لا يعرفون حركة Ctrl+نقرة، لذلك في حالة خيارات قليلة تكون مجموعة مربعات اختيار أسهل استخدامًا.

قراءة القيمة وضبطها في JavaScript

select.value تقرأ قيمة الخيار المختار وتضبطها، وحدث change ينطلق حين يختار القارئ خيارًا مختلفًا. من الاستخدامات الشائعة قائمة منسدلة ثانية تعتمد خياراتها على الأولى:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) تنشئ خيارًا. وselect.selectedIndex هي موضع الخيار المختار، وselect.selectedOptions تسرد الخيارات المختارة، وهكذا تقرأ select المتعدد.

تنسيق select

القائمة المفتوحة يرسمها المتصفح ونظام التشغيل، ولا يمكن تنسيق إلا القليل منها. أما الصندوق المغلق فيمكن تنسيقه: appearance: none تزيل السهم الأصلي، وصورة خلفية تضع سهمك مكانه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

الحشو الإضافي في جهة النهاية يترك مساحة للسهم كي لا يمر نص الخيار الطويل تحته. وfont: inherit مهمة هنا بقدر أهميتها في الأزرار: عناصر select تستخدم خط النماذج الصغير الخاص بالمتصفح افتراضيًا. الخيارات في القائمة المفتوحة تحتفظ بالمظهر الأصلي. يستطيع Chrome تنسيق القائمة المفتوحة أيضًا حين تفعّل ذلك بـ appearance: base-select، والمتصفحات التي لا تدعمه تعرض القائمة الأصلية. أما التحكم الكامل في كل مكان فيحتاج إلى عنصر مخصص مبني بـ ARIA، وإتقانه يتطلب جهدًا أكبر بكثير مما يبدو.

select أم أزرار radio أم datalist؟

استخدم	متى
`<select>`	خيار واحد من قائمة طويلة، أو حين تكون المساحة ضيقة
أزرار الاختيار	خيار واحد من خيارات قليلة يجب أن تكون كلها ظاهرة (راجع زر الاختيار radio)
`<input>` مع `<datalist>`	اقتراحات، مع السماح بأي قيمة مكتوبة

أخطاء شائعة

غياب خيار نائب في اختيار إلزامي. يُرسل أول خيار حقيقي حتى لو لم يختره القارئ.
خيار نائب بقيمة حقيقية، مثل value="none". تعدّه required اختيارًا صالحًا. استخدم value="".
خيارات بلا value حين يكون النص طويلًا أو مترجمًا. يستقبل الخادم النص الظاهر، وهو يتغير مع اللغة.
multiple لخيارات قليلة. مربعات الاختيار أسهل استخدامًا.
الاستماع إلى click على الخيارات. استخدم change على <select>، فهو ينطلق أيضًا مع التغييرات بلوحة المفاتيح.
غياب التسمية. القائمة التي لا تحمل إلا خيارًا نائبًا تفقد اسمها بمجرد اختيار خيار.

الأسئلة الشائعة

كيف أنشئ قائمة منسدلة في HTML؟

استخدم <select> مع <option> لكل خيار: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. أعطِ select اسم name و<label>.

كيف أحدد الخيار الافتراضي في select؟

أضف selected إلى ذلك الخيار: <option value="blue" selected>Blue</option>. من دونها يكون الخيار الأول هو المحدد. وفي JavaScript اضبط select.value = 'blue'.

كيف أضيف نصًا توضيحيًا (placeholder) إلى select؟

اجعل الخيار الأول فارغًا وغير قابل للاختيار: <option value="" disabled selected>Choose a country</option>. وأضف required إلى <select> كي لا يُرسل النموذج حتى يُختار خيار حقيقي.

كيف أحصل على القيمة المختارة في select بـ JavaScript؟

select.value هي قيمة الخيار المحدد. ولنصه الظاهر استخدم select.selectedOptions[0].text، واستمع إلى حدث change لتستجيب عند تغيّر الاختيار. وفي select المتعدد، مرّ على select.selectedOptions.

ما الفرق بين select وdatalist؟

<select> لا يسمح إلا بالخيارات المدرجة. أما <input> مع <datalist> فيقترح خيارات أثناء الكتابة لكنه يقبل أي نص. استخدم select حين يجب أن تكون الإجابة أحد خياراتك.

مفاهيم ذات صلة