JavaScript: pour masquer et afficher le texte d'ancher à travers une sélection de liste déroulante

Question

à travers une sélection de liste déroulante Je veux montrer plusieurs ancre divs qui sont normalement cachés.

La ligne brute se présente comme suit

h1 id="rglandwahl"><span style="color: #222222;">Wähle ein Land</span></h1> 
    <form id="rgasia" class="dropdownrg" action="#" name="rgasia"><select name="Land"> 
    <option disabled="disabled" selected="selected" value="">Land wählen</option> 
    <option value="Indien">Indien</option> 
    <option value="Indonsien">Indonesien</option> 
    <option value="Japan">Japan</option> 
    etc... 
    </select></form> 

Javascript ressemble ci-dessous

<script type="text/javascript"> 
    function toggleMe(a){ 


    AlleAus() 

    var e = document.getElementById(a); 


    if(!e)return true; 

    // Umschaltung 
    if(e.style.display == "none") 
    { 
    e.style.display = "block" 
    } 
    else 
    { 
    e.style.display = "none" 
    } 

    return true; 
    } 




    function AlleAus() { 
    #Indien.style.display = "none"; 

    #Indonesien.style.display = "none"; 

    #Japan.style.display = "none"; 
    etc... 
    } 
    </script> 

J'ai essayé plusieurs façons comme

<option onClick="return toggleMe('Indien')">Indien</option> 

ou

<option onClick="return toggleMe('#Indien')>Indien</option> 

ou

<option onClick="return toggleMe('#Indien')value="#Indien">Indien</option> 

ou Indien

ou bien

<form id="rgasia" class="dropdownrg" action="#" name="rgasia"><select name="Land" onclick="toggleMe(a)> 

avec les mêmes possibilités comme ci-dessus.

Tous ne fournissent pas le résultat que je voudrais. Qu'est ce que je fais mal?

Answer 1

Guten Tag, Thomas.

Le principal problème que je vois avec votre code est que les éléments d'option ne répondent pas aux événements "click". Au lieu de cela, vous voudrez utiliser l'événement "change" sur l'élément select.

En outre, il est généralement considéré comme une meilleure forme de créer l'écouteur d'événement en JavaScript plutôt que comme un attribut dans le HTML, bien que ce soit une question de préférence personnelle dans une certaine mesure.

Voici donc un exemple de la façon dont vous pouvez coder ceci:

<script> 
var e = document.getElementById("Land"); // You will need to set the "id" attribute of the select element to "Land" in order for this to work. 
if (e) { 
    e.addEventListener("change", toggleMe); 
} 

function toggleMe() { 
    AlleAus(); 

    var e = this; 
    if(!e)return true; 

    // Umschaltung 
    if(e.style.display == "none") 
    { 
     e.style.display = "block"; 
    } 
    else 
    { 
     e.style.display = "none"; 
    } 

    return true; 
} 

function AlleAus() { 
    document.getElementById("Indien").style.display = "none"; 

    document.getElementById("Indonesien").style.display = "none"; 

    document.getElementById("Japan").style.display = "none"; 
    etc... 
} 
</script> 

Vous voulez supprimer tout « onclick » attributs que vous avez ajouté aux éléments d'option pour que le code ci-dessus fonctionne correctement .

J'espère que cela vous aide. Viel Glück!

Answer 2

Cela fonctionne pour moi:

<span style="color: #222222;">Wähle ein Land</span></h1> 
    <form id="rgasia" class="dropdownrg" action="#" name="rgasia"> 
<select name="Land" onchange="selectCounty(this.value)"> 
    <option disabled="disabled" selected="selected" value="">Land wählen</option> 
    <option value="Indien">Indien</option> 
    <option value="Indonsien">Indonesien</option> 
    <option value="Japan">Japan</option> 
    </select> 
</form> 

<div class="country" id="Indien">Indien</div> 
<div class="country" id="Indonsien">Indonsien</div> 
<div class="country" id="Japan">Japan</div> 

Javascript

function selectCounty(showme){ 
    $(".country").hide(); 
    $("#"+showme).show(); 
} 

CSS

.country{ 
    display:none; 
} 

Démo: http://codesheet.org/codesheet/82ahRD4o