Drop down seçici oluşturma

Arkadaşlar merhaba,

wordpress ile oluşturduğum siteme bir seçici eklemek istiyorum. Yapmayı istediğim örnek aşağıdaki görseldeki gibi. Yani listeden bir dil seçince altına o dil için olabilecek hedef diller geliyor.

<script>
    function showLanguageSection(value) {
        var languageSections = document.getElementById("languageSections").children;
        for (var i = 0; i < languageSections.length; i++) {
            languageSections[i].style.display = "none";
        }
        if (value !== "") {
            var selectedSection = document.getElementById(value);
            selectedSection.style.display = "block";
        }
    }
</script>

<strong>Source Language:</strong> <select onchange="showLanguageSection(this.value)">
<option value="">Please Select</option>
<option value="en">English</option>
<option value="tr">Türkçe</option>
<option value="es">German</option><!-- Diğer dilleri buraya ekleyin -->
</select>
<div id="languageSections">
<div id="en" style="display: none;">İngilizce içerik burada görüntülenecek.</div>
<div id="tr" style="display: none;">Türkçe içerik burada görüntülenecek.</div>
<div id="es" style="display: none;">İspanyolca içerik burada görüntülenecek.</div>
<!-- Diğer diller için benzer şekilde bölümler ekleyin -->

</div>

kodlarını kullanarak bunu yapmayı denedim ancak aşağıdaki gibi bir sonuç aldım

Yani seçici çalışıyor ama bir dil seçildiğinde altına gelmesi gereken yazılar gelmiyor. Nerede hata veya eksik yapıyor olabilrim?

<br><br>
<strong>Source Language:</strong>
<select onchange="showLanguageSection(this.value)">
    <option value="">Please Select</option>
    <option value="en">English</option>
    <option value="tr">Türkçe</option>
    <option value="es">Spanish</option>
    <!-- Diğer dilleri buraya ekleyin -->
</select>

<div id="languageSections">
    <div id="en" style="display: none;">
        <strong>English Targets:</strong>
        <ul>
            <li>Target Language 1</li>
            <li>Target Language 2</li>
            <!-- İngilizce için hedef dilleri buraya ekleyin -->
        </ul>
    </div>
    <div id="tr" style="display: none;">
        <strong>Türkçe Hedefler:</strong>
        <ul>
            <li>Hedef Dil 1</li>
            <li>Hedef Dil 2</li>
            <!-- Türkçe için hedef dilleri buraya ekleyin -->
        </ul>
    </div>
    <div id="es" style="display: none;">
        <strong>Spanish Targets:</strong>
        <ul>
            <li>Target Language 1</li>
            <li>Target Language 2</li>
            <!-- İspanyolca için hedef dilleri buraya ekleyin -->
        </ul>
    </div>
    <!-- Diğer diller için benzer şekilde bölümler ekleyin -->
</div>

<script>
    function showLanguageSection(selectedValue) {
        var languageSections = document.getElementById("languageSections").children;
        for (var i = 0; i < languageSections.length; i++) {
            var section = languageSections[i];
            if (section.id === selectedValue) {
                section.style.display = "block";
            } else {
                section.style.display = "none";
            }
        }
    }
</script>

dener misiniz? @oguzhan306;

Yok hocam durum stabil.
Acaba önceden çağırılması gereken kütüphane felan olabilir mi?