ドロップダウンバリュー（バニラ）に基づいてHTMLを非表示

Question

私は非常にjavascriptをコーディングし、私はいくつかの記事を検索し、これを動作させることはできませんので、ごめんなさい簡単な答えです。

ドロップダウンメニューで1つのオプションが選択されているかどうかに基づいてdiv要素を表示する必要があります。インラインにする必要がある、バニラjs（jQueryなし）。ここに私が持っているものがありますが、何かが働いていません。

のJava：

<script type="text/javascript"> 
    var repeatCombo = document.getElementById("repeatSelect"); 
    var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text; 

    function repeatCheck() { 

    if (repeatVal = 'Repeat Deposit') { 
     document.getElementById('repeatGroup').style.display = 'block'; 
    } 
    else document.getElementById('repeatGroup').style.display = 'none'; 

    } 
</script> 

HTML：

<div class="form-group"> 
    <label class="col-md-4 control-label" for="repeatSelect">Initial/Repeat Deposit</label> 
    <div class="col-md-4"> 
    <select name="repeatSelect" class="form-control input-md" id="repeatSelect" onchange="javascript:repeatCheck();"> 
    <option value="Initial Deposit" >Initial Deposit</option> 
    <option value="Repeat Deposit" >Repeat Deposit</option> 
    </select> 
    </div> 
</div> 

<div id="repeatGroup" style="display: none;"> 
    <label class="col-md-4 control-label" for="repeatDepositInfo">Date of Initial Deposit</label> 
    <div class="col-md-4"> 
    <input name="repeatDepositInfo" class="form-control input-md" id="repeatDepositInfo" type="date" placeholder=""> 
    </div> 
</div> 

Answer 1

これを試してみてください：

<script type="text/javascript"> 
    function repeatCheck() { 
     var repeatCombo = document.getElementById("repeatSelect"); 
     var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text; 

     if (repeatVal == 'Repeat Deposit') { 
      document.getElementById('repeatGroup').style.display = 'block'; 
     } else { 
      document.getElementById('repeatGroup').style.display = 'none'; 
     } 
    } 
</script> 

あなたのif文と関数の中で、いくつかの構文エラーを持っていました。 if文のelse部分には大括弧も必要で、値をチェックするときには二重等価を使用することを忘れないでください。

また、関数内にrepeatValを移動しました。そうでない場合は、関数が実行されたときに初期値のままになり、再度チェックされません。機能に配置することにより、機能が開始されるたびに値がリセットされます。

を編集してください。repeatComboを機能に追加することを提案してくれたKudos Johnsonに感謝します。

Answer 2

これはすでにかなり解決されていましたが、私も手を投げます。

あなたの2つの問題は、ifステートメントの代入演算子で、ユーザーが選択したオプションを変更するたびにチェックする必要があるため、関数内でrepeatVal変数を移動する必要がありました。今のように、スクリプトがロードされた分、変数にはselect要素のデフォルト値が割り当てられ、何も変更できないので静的です。

ここに私のコードだ

...

var repeatCombo = document.getElementById("repeatSelect"); 

    function repeatCheck() { 
    var repeatVal = repeatCombo.options[repeatCombo.selectedIndex].text; 
    if (repeatVal == 'Repeat Deposit') { 
     document.getElementById('repeatGroup').style.display = 'block'; 
    } 
    else document.getElementById('repeatGroup').style.display = 'none'; 

    }