HTML選択ボックスdivの表示/非表示に関するJQueryの問題

Question

データベースに送信する前に、リストからデバイスの種類を選択する必要があるクライアントが関係するWebサイトを構築しています。

ユーザーがHTML選択ドロップダウンメニューで「Chromebook」オプションを選択すると、メッセージが表示されるように機能が必要です。

私はこれを達成しましたが、さまざまな成功を収めました。

ページが最初に読み込まれるとき、選択ボックスにデフォルトオプションが表示されているにもかかわらず、私のメッセージを含むdivが既に表示されています。オプションが選択されている場合（Chromebook以外）はdivが消えます）。

私はJSFiddleの重要な部分を嘲笑し、下に自分のコードを投稿しました。誰かが私のコードを修正するか、正しい結果を達成するためのより良い方法を提案する可能性がいずれかの場合

Link

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<div id="media"> 
<select> 
    <option selected hidden disabled value="">Select One...</option> 
    <option value="laptop">Laptop</option> 
    <option value="chromebook">Chromebook</option> 
    <option value="desktop">Desktop</option> 
</select> 
</div> 

<div class='notice'> 
    Some text... 
</div> 

<script> 
$(document).ready(function() { 
if($('#media select').val() == 'chromebook'){ //'.val()' 
     $('.notice').show(); 
    } 


$('#media select').change(function(){ 
    if($(this).val() == 'chromebook'){ //'.val()' 
     $('.notice').show(); 
     return true; 
    } 
    $('.notice').hide(); 
}); 
}); 
</script> 

は理想的です。

ありがとうございました！

ジャック

Answer 1

あなたが使用することができます通知を隠している：

• .toggle(display)：表示：それを隠すために要素またはfalseを表示する場合はtrueを使用します。

$(document).ready(function() { 
 
    $('#media select').change(function(){ 
 
    $('.notice').toggle($(this).val() == 'chromebook'); 
 
    }).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="media"> 
 
    <select> 
 
     <option selected hidden disabled value="">Select One...</option> 
 
     <option value="laptop">Laptop</option> 
 
     <option value="chromebook">Chromebook</option> 
 
     <option value="desktop">Desktop</option> 
 
    </select> 
 
</div> 
 

 
<div class='notice'> 
 
    Some text... 
 
</div>

Answer 2

あなたは、ページの読み込み

$(document).ready(function() { 
 
if($('#media select').val() == 'chromebook'){ //'.val()' 
 
     $('.notice').show(); 
 
} 
 

 

 
$('#media select').change(function(){ 
 
    if($(this).val() == 'chromebook'){ //'.val()' 
 
     $('.notice').show(); 
 
     return true; 
 
    } 
 
    $('.notice').hide(); 
 
}); 
 
});

.notice{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="media"> 
 
<select> 
 
    <option selected hidden disabled value="">Select One...</option> 
 
    <option value="laptop">Laptop</option> 
 
    <option value="chromebook">Chromebook</option> 
 
    <option value="desktop">Desktop</option> 
 
</select> 
 
</div> 
 

 
<div class='notice'> 
 
    Some text... 
 
</div>

Answer 3

にnoneにテキストを表示するために忘れてしまったあなたは自分の.ready関数の先頭に$('.notice').hide();を設定する必要があります。何も、最初は

Answer 4

ちょうどあなたのコード内の小さなアップデートが動作します：作成後すぐに変更イベントを発射する

.trigger()。以下のように文書の準備行の後に$('.notice').hide();を追加してください。私は私のコードでそれを追加することになり

$(document).ready(function() { 
 
    $('.notice').hide(); 
 
    
 
    if($('#media select').val() == 'chromebook'){ //'.val()' 
 
      $('.notice').show(); 
 
     } 
 

 

 
    $('#media select').change(function(){ 
 
     if($(this).val() == 'chromebook'){ //'.val()' 
 
      $('.notice').show(); 
 
      return true; 
 
     } 
 
     $('.notice').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="media"> 
 
<select> 
 
    <option selected hidden disabled value="">Select One...</option> 
 
    <option value="laptop">Laptop</option> 
 
    <option value="chromebook">Chromebook</option> 
 
    <option value="desktop">Desktop</option> 
 
</select> 
 
</div> 
 

 
<div class='notice'> 
 
Some text... 
 
</div>