2

私は今のところ何かに行き詰まっています。ユーザーが選択ドロップダウン フォームから特定のオプションを 1 つ選択したときに、テキストを含む DIV を表示したいと考えています。Javascriptでこれを行うにはどうすればよいですか? 私がオンラインで見つけたものは、あなたが選択したものだけを取り、あなたが選んだ値を示しています。

一方、私はこのようなことをしたい:

<select>
<option>One</option>
<option>Two</option>
</select>

<div id="text" style="display:hidden;">The text would show if the user chooses option "Two"</div>

誰でもこれを行う方法を知っていますか?

アップデート：

これが私の問題です。本文とヘッダーの両方でこのスクリプトを使用してみました。

<script type="text/javascript">
document.getElementById('script-choose').onchange=function(){
for(var i=0;i<document.getElementsByClassName('option-show').length;i++){
    document.getElementsByClassName('option-show')[i].style.display='none';
}
document.getElementById(document.getElementById('script-choose').value == 'gold').style.display='block';}
</script>

選択フォームの ID は「script-choose」で、非表示のテキストを表示するために使用している値は「gold」です。ただし、いつ「金」の値を選択しても、テキストは表示されません。私が使用しているDIVは次のとおりです。

<div id="one-show" class="option-show" style="font-size:10.5px;color:red;">You will get one free theme of choice later on! :D </div>
4

4 に答える 4

1

コメントによると、「Two」が選択されたときにdivが表示されるようにしてください。わかりやすくするために、最初から最後までのコード全体を次に示します。

<select id="mySelect" onchange='on_change(this)'> // Note the onchange event handler, which passes the select object to the on_change function via the 'this' variable
    <option value='one'>One</option> // Note I added value='one'
    <option value='two'>Two</option> // Note I added value='two'
</select>

<div id="text" style="display:none;"> // Note display:none instead of display:hidden
    The text would show if the user chooses option "Two"
</div>

<script>
    function on_change(el){
        if(el.options[el.selectedIndex].value == 'two'){ 
            document.getElementById('text').style.display = 'block'; // Show el
        }else{
            document.getElementById('text').style.display = 'none'; // Hide el
        }
    }
</script>

あなたの質問に答えるために、選択ボックスのonChangeイベントハンドラーを呼び出すときにel使用して渡される選択オブジェクトに置き換える必要はありません。thison_change()

さらに、ここでは基本的に他のすべての回答のアドバイスを受け入れないでください。イベントハンドラーを設定してDOMを操作するのと同じくらい簡単なことをするためにjQueryをインポートすることは、過度で無意味です-jQueryを学ぶ前にJavaScriptを学びましょう。

于 2013-08-26T06:21:28.920 に答える
0

ページに jQuery を含めることができる場合は、こちらの作業サンプルをご覧ください: JSBin の例

参照用のコード:

HTML:

<select id="mySelect">
<option>One</option>
<option>Two</option>
</select>

<div id="text" style="display:none;">The text would show if the user chooses option "Two"</div>

次の jQuery を含めます。

    $( "#mySelect" ).change(function () {

     if($( "#mySelect").val()=="Two")
          {   
            $( "#text" ).css('display','block');
          }
     else{
       $( "#text" ).css('display','none');
     }
  })
  .change();
于 2013-08-26T06:19:42.763 に答える
0

jQueryを使用する場合。hidden というクラスを追加した方がよいでしょう。これは {display:none} であり、div の可視性を簡単に切り替えることができます。

 $('select').change(function() {
        var str = $( "select option:selected" ).text();
        if(str  === 'One') {
           $('#text').removeAttr('style');
        }
    });
于 2013-08-26T06:24:13.153 に答える