jQuery: كيفية الحصول على النص من القائمة المنسدلة (select) — تحليل كامل

هل سبق لك أن أمسكت بنفسك تفكر: "لماذا أحصل على value بينما أحتاج إلى النص؟"

مرحبًا بكم في PythonLib! اليوم سنقوم بتحليل واحدة من أكثر المشكلات شيوعًا التي يواجهها كل من المبتدئين والمطورين ذوي الخبرة في الواجهة الأمامية. تقوم بإنشاء نموذج جميل، وتضيف قائمة منسدلة (select box)، وتكتب معالجًا باستخدام jQuery… وفجأة تدرك أنك لا تحتاج إلى value (رمز البلد الرقمي، معرف المنتج أو شيء من هذا القبيل)، بل تحتاج إلى نص قابل للقراءة البشرية يراه المستخدم في القائمة.

هذا السؤال على Stack Overflow حصد آلاف المشاهدات وعشرات الإجابات. نحن لا ننسخ واحدة منها فقط — بل سنقوم بتفصيل المهمة، ونعرض عدة طرق للحل، ونقدم كودًا جاهزًا يمكنك إدراجه في مشروعك الآن. هيا بنا!

المشكلة: value مقابل text

تخيل كود HTML نموذجي:

<select id="citySelect">\n    <option value="1">موسكو</option>\n    <option value="2">سانت بطرسبرغ</option>\n    <option value="3">نوفوسيبيرسك</option>\n</select>

عندما يختار المستخدم "سانت بطرسبرغ"، فإن كود jQuery القياسي $('#citySelect').val() سيعيد "2". ولكن ماذا لو كنت بحاجة إلى عرض "سانت بطرسبرغ" بالضبط على الصفحة؟ أو إرسال اسم قابل للقراءة إلى التحليلات؟ هنا يبدأ سحر التنقل في DOM.

الحل رقم 1: الطريقة التقليدية باستخدام .text()

أبسط وأكثر طريقة بديهية هي الحصول على العنصر المحدد <option>، ثم استخراج محتواه النصي.

$('#citySelect').on('change', function() {\n    var selectedText = $(this).find('option:selected').text();\n    console.log('لقد اخترت:', selectedText);\n});

كيف يعمل هذا؟
\n$(this) — مرجع إلى عنصر select الخاص بنا (داخل معالج الحدث).
\n.find('option:selected') — نبحث بين option الفرعية عن تلك التي تحتوي على السمة selected.
\n.text() — نستخرج النص النقي (بدون وسوم HTML).

مكافأة: إذا كان لديك عدة عناصر select في الصفحة، استخدم class أو ID بدلاً من this.

الحل رقم 2: استخدام .children() و .filter()

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

$('#citySelect').on('change', function() {\n    var selectedText = $(this).children('option:selected').text();\n    // بديل باستخدام filter:\n    // var selectedText = $(this).children('option').filter(':selected').text();\n    alert('المدينة المختارة: ' + selectedText);\n});

الفرق بين find() و children() هو أن children() ينظر فقط إلى التابعين المباشرين، بينما find() ينظر إلى جميع التابعين من أي مستوى. بالنسبة لـ select القياسي، هذا لا يهم، لكن من المفيد معرفته.

الحل رقم 3: الحصول على النص عند تحميل الصفحة

غالبًا ما تحتاج إلى عرض النص المحدد فورًا، دون انتظار حدث change. على سبيل المثال، عند تهيئة النموذج.

$(document).ready(function() {\n    var initialText = $('#citySelect option:selected').text();\n    $('#selectedCityDisplay').text('المدينة الحالية: ' + initialText);\n});

هذا الكود سيتم تنفيذه مرة واحدة عند تحميل DOM وسيكتب نص الخيار المحدد افتراضيًا في العنصر ذو ID selectedCityDisplay.

الحل رقم 4: دالة مساعدة عامة

إذا كنت تكتب تطبيقًا جادًا، فمن المنطقي استخراج المنطق إلى دالة منفصلة. بهذه الطريقة يصبح الكود أنظف وقابلًا لإعادة الاستخدام.

function getSelectedText(selectId) {\n    return $('#' + selectId + ' option:selected').text();\n}\n\n// الاستخدام:\n$('#citySelect').on('change', function() {\n    var text = getSelectedText('citySelect');\n    co