تعامل مع حدث اختيار الخيار في HTML
بمجرد اختيار خيار من القائمة المنسدلة، يمكنك تنفيذ وظيفة تحدث عند حدوث الحدث وتعالجه. يمكن تحقيق هذا باستخدام جافا سكريبت. سأقدم لك كودًا يمكنك استخدامه لتحقيق ذلك:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event handler on chosen optiontitle>
head>
<body>
<select id="mySelect">
<option value="1">Aoption>
<option value="2">Boption>
<option value="3">Coption>
<option value="4">Doption>
select>
<script>
document.getElementById("mySelect").addEventListener("change", function() {
var selectedOption = this.value;
var optionText = this.options[this.selectedIndex].text;
alert("Chosen option is: " + optionText);
});
script>
body>
html>
في هذا الكود، قمت بتضمين عنصر في صفحة HTML الخاصة بنا. عندما يتم تغيير القيمة المحددة في القائمة المنسدلة، يتم تنفيذ الكود داخل المستمع.
داخل المستمع، نقوم بالخطوات التالية:
- نستخرج القيمة المحددة للخيار (
selectedOption) باستخدامthis.value. - نستخرج نص الخيار المحدد (
optionText) باستخدامthis.options[this.selectedIndex].text. - نقوم بعرض نص الرسالة التنبيهية باستخدام
alert()وندمج فيها نصًا يوضح الخيار المحدد.
هذا الكود يعتبر بسيطًا وفعّالًا للتعامل مع حالة تغيير القيمة في القائمة المنسدلة. يمكنك استخدام هذا المثال كنقطة انطلاق لتطوير وظائف أكثر تعقيدًا بناءً على احتياجاتك. على سبيل المثال، يمكنك استبدال alert() بطريقة لتحديث قسم آخر من صفحتك بناءً على الخيار المحدد، أو إجراء أي نوع من المعالجة اللاحقة الضرورية.
لاحظ أيضًا أن هذا الكود يعمل بشكل جيد لقائمة منسدلة بسيطة، ولكن يمكن تعديله وتوسيعه لتناسب حالات استخدام مختلفة، مثل قوائم منسدلة متعددة الاختيارات أو قوائم مع خيارات مخصصة.