قبل البدء في إنشاء قائمة منسدلة، من المهم معرفة ما هي القائمة المنسدلة. القائمة المنسدلة هي قائمة قابلة للتبديل تتيح للمستخدم اختيار خيار واحد من عدة خيارات. يتم تعريف الخيارات الموجودة في هذه القائمة في الترميز المرتبط بالوظيفة. عند النقر فوق هذا الخيار أو تحديده، يتم تشغيل هذه الوظيفة وتبدأ في الأداء.

لقد شاهدت قائمة منسدلة في أغلب الأحيان في نماذج التسجيل لاختيار الولاية أو المدينة من القائمة المنسدلة. تتيح لنا القائمة المنسدلة اختيار عنصر واحد فقط من قائمة العناصر. انظر لقطة الشاشة أدناه كيف تبدو القائمة المنسدلة-

نقاط مهمة لإنشاء القائمة المنسدلة

• يتم استخدام علامة التبويب مع علامة التبويب لإنشاء قائمة منسدلة بسيطة بتنسيق HTML. بعد ذلك يساعد JavaScript في إجراء العملية باستخدام هذه القائمة.
• بخلاف ذلك، يمكنك استخدام علامة تبويب الحاوية لإنشاء القائمة المنسدلة. أضف العناصر المنسدلة والروابط بداخلها. وسنناقش كل طريقة مع مثال في هذا الفصل.
• يمكنك استخدام أي عنصر مثل، ، أو

  لفتح القائمة المنسدلة.

راجع الأمثلة أدناه لإنشاء قائمة منسدلة باستخدام طرق مختلفة.

كيف يعمل الكمبيوتر

أمثلة

قائمة منسدلة بسيطة باستخدام علامة التبويب

إنه مثال بسيط لإنشاء قائمة منسدلة بسيطة وسهلة دون استخدام أي شيء معقد جافا سكريبت التعليمات البرمجية وورقة أنماط CSS.

رمز النسخ

بيان حالة جافا

 dropdown menu using select tab function favTutorial() { var mylist = document.getElementById(&apos;myList&apos;); document.getElementById(&apos;favourite&apos;).value = mylist.options[mylist.selectedIndex].text; } <b> Select you favourite tutorial site using dropdown list </b> ---Choose tutorial--- w3schools Javatpoint tutorialspoint geeksforgeeks <p> Your selected tutorial site is: <input type="text" id="favourite" size="20" < p> </p>

انتاج |

من خلال تشغيل الكود أعلاه، سوف تحصل على الاستجابة مثل لقطة الشاشة المعطاة. وسوف تحتوي على قائمة منسدلة تحتوي على قائمة بالمواقع التعليمية.

حدد عنصرًا واحدًا من القائمة المنسدلة بالنقر فوقه.

ما هو Desktop.ini

انظر في لقطة الشاشة أدناه أنه تم عرض العنصر المحدد في حقل الإخراج.

يمكن إنشاء قائمة منسدلة باستخدام بعض الطرق الأخرى؛ انظر بعض الأمثلة أدناه.

قائمة منسدلة باستخدام الزر وعلامة التبويب div

في هذا المثال، سنقوم بإنشاء قائمة منسدلة تحتوي على زر يحتوي على قائمة العناصر كقائمة منسدلة.

رمز النسخ

 dropdown menu using button /* set the position of dropdown */ .dropdown { position: relative; display: inline-block; } /* set the size and position of button on web */ .button { padding: 10px 30px; font-size: 15px; } /* provide css to background of list items */ #list-items { display: none; position: absolute; background-color: white; min-width: 185px; } /* provide css to list items */ #list-items a { display: block; font-size: 18px; background-color: #ddd; color: black; text-decoration: none; padding: 10px; } //show and hide dropdown list item on button click function show_hide() { var click = document.getElementById(&apos;list-items&apos;); if(click.style.display ===&apos;none&apos;) { click.style.display =&apos;block&apos;; } else { click.style.display =&apos;none&apos;; } } Choose Language <a href="#"> Hindi </a> <a href="#"> English </a> <a href="#"> Spanish </a> <a href="#"> Chinese </a> <a href="#"> Japanese </a> 

انتاج |

من خلال النقر على زر القائمة المنسدلة هذا، ستحصل على قائمة بالعناصر التي يتعين عليك تحديد عنصر واحد فيها من تلك القائمة. انظر اللقطة في الاسفل:

حاول التقاط الكتلة في Java

اضغط على قائمة منسدلة زر وإخفاء القائمة.

مثال على القائمة المنسدلة المتعددة

في الأمثلة المذكورة أعلاه، قمنا بإنشاء قائمة منسدلة واحدة. سنقوم الآن بإنشاء نموذج يحتوي على قائمة منسدلة متعددة تضم قوائم متنوعة من البرامج التعليمية للموضوعات الفنية عبر الإنترنت مثل ج , سي ++ , بي أتش بي , ماي إس كيو إل ، و جافا ، مقسمة إلى عدة فئات. عندما ينقر المستخدم على زر منسدل معين، سيتم فتح القائمة المنسدلة الخاصة به لك.

انظر المثال أدناه لكيفية القيام بذلك:

 .dropbtn { background-color: green; color: white; padding: 14px; font-size: 16px; cursor: pointer; } .dropbtn:hover { background-color: brown; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 140px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; } <h2>List of tutorials using Dropdown menu</h2> <p>Click on the button to open the tutorial dropdown menu.</p> Programming <a href="#java">Java</a> <a href="#python">Python</a> <a href="#c++">C++</a> <a href="#c">C</a> Database <a href="#mysql">MySQL</a> <a href="#mdb">MongoDB</a> <a href="#cass">Cassandra</a> Web Technology <a href="#php">PHP</a> <a href="#css">CSS</a> <a href="#js">JavaScript</a> /* methods to hide and show the dropdown content */ function programmingList() { document.getElementById(&apos;myDropdown1&apos;).classList.toggle(&apos;show&apos;); } function databaseList() { document.getElementById(&apos;myDropdown2&apos;).classList.toggle(&apos;show&apos;); } function WebTechList() { document.getElementById(&apos;myDropdown3&apos;).classList.toggle(&apos;show&apos;); } /* methods to redirect to tutorial page that user will select from dropdown list */ function java() { window.location.replace(&apos;https://www.javatpoint.com/java-tutorial&apos;); } function python() { window.location.replace(&apos;https://www.javatpoint.com/python-tutorial&apos;); } function cpp() { window.location.replace(&apos;https://www.javatpoint.com/cpp-tutorial&apos;); } function c() { window.location.replace(&apos;https://www.javatpoint.com/c-programming-language-tutorial&apos;); } function mysql() { window.location.replace(&apos;https://www.javatpoint.com/mysql-tutorial&apos;); } function mDB() { window.location.replace(&apos;https://www.javatpoint.com/mongodb-tutorial&apos;); } function cassandra() { window.location.replace(&apos;https://www.javatpoint.com/cassandra-tutorial&apos;); } function php() { window.location.replace(&apos;https://www.javatpoint.com/php-tutorial&apos;); } function css() { window.location.replace(&apos;https://www.javatpoint.com/css-tutorial&apos;); } function js() { window.location.replace(&apos;https://www.javatpoint.com/javascript-tutorial&apos;); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches(&apos;.dropbtn&apos;)) { var dropdowns = document.getElementsByClassName(&apos;dropdown-content&apos;); var i; for (i = 0; i <dropdowns.length; i++) { var opendropdown="dropdowns[i];" if (opendropdown.classlist.contains('show')) opendropdown.classlist.remove('show'); } < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>On executing the above code, a form with three dropdown buttons will appear. Each dropdown button has a list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-5.webp" alt="How to create dropdown list using JavaScript"> <p>Click on any of the dropdown button to see the list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-6.webp" alt="How to create dropdown list using JavaScript"> <p>Let you click on MongoDB under database tutorial, it will redirect you to our javatpoint MongoDB tutorial . See the output below:</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-7.webp" alt="How to create dropdown list using JavaScript"> <h4>Note: if you click outside the dropdown window, the dropdown list will be disappeared.</h4> <p>Usually, a dropdown menu is created to categories the items of the same type. Means the list of similar type of items. It is much similar to the tutorial website, which has several lists of our javatpoint subject tutorials.</p> <hr></dropdowns.length;>