JavaScript：ドロップダウン選択でアンカーテキストを非表示にして表示する

Question

ドロップダウンリストから通常は非表示のアンカーdivsをいくつか表示します。

生の行は、私が

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

または

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

のような多くの方法を試してみました

<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> 

以下のように見えるこの

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のように見えます上記のような同じ可能性を有する

又は

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

又はインディアン

又は同様

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

。

すべては私が望む結果を提供していません。私は何を間違っているのですか？

Answer 1

Guten Tag、Thomas。

あなたのコードで見られる主な問題は、オプション要素が「クリック」イベントに反応しないことです。むしろ、select要素で "change"イベントを使用することになります。

また、HTMLの属性としてではなく、JavaScriptでイベントリスナーを作成する方が一般的に好ましいと考えられますが、これは個人的な好みの問題です。だからここ

は、あなたがこれをコーディングする方法の例です：あなたはどんな「のonClick」を削除したいと思うでしょう

<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> 

あなたは上記のコードが正しく動作するためには、オプションの要素を追加したことを属性

。

私はこれがあなたを助けてくれることを願っています。ヴィエル・グルック！

Answer 2

これが私の作品：

<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; 
} 

デモ：http://codesheet.org/codesheet/82ahRD4o