JavaScript لعرض قيمة مختصرة من العنصر select

لكتابة سكريبت JavaScript يقوم بعرض قيمة جزئية من العنصر select، يمكنك استخدام الاتي:

javascriptCopy code
document.addEventListener('DOMContentLoaded', function() {
    var selectElement = document.getElementById('country-select');

    selectElement.addEventListener('change', function() {
        var selectedIndex = selectElement.selectedIndex;
        var selectedOption = selectElement.options[selectedIndex];
        var phoneCode = selectedOption.dataset.phoneCode;

        if (phoneCode) {
            var selectedText = selectedOption.textContent;
            var countryCode = selectedText.substring(selectedText.indexOf(' ') + 1);
            selectElement.options[selectedIndex].textContent = countryCode + ' (' + phoneCode + ')';
        }
    });
});

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

يجب عليك تعديل السكريبت بحيث يناسب بنية صفحتك، وضمان أن العنصر select يحتوي على خيارات تحتوي على البيانات المناسبة لكل دولة، حيث تكون البيانات مثل “phoneCode” معرفة بشكل صحيح.

لكي نتمكن من تنفيذ السكريبت بشكل صحيح، يجب أن يكون لدينا العنصر select في صفحتك وأن يحتوي على الخيارات التي تحتوي على البيانات اللازمة. يجب عليك أيضًا تأكيد أن كل بيانات الرمز الهاتفي (phoneCode) متوفرة في خياراتك بشكل مناسب.

الشيفرة السابقة تعتمد على استخدام خاصية data-phone-code في كل خيار لتخزين الرمز الهاتفي، لذا يجب عليك التأكد من وجود هذه البيانات في خياراتك. إذا كانت البيانات متوفرة، فيمكنك استخدام الشيفرة كما هي دون تغييرات.

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