選択リストのjquery選択

Question

jqueryの選択について質問があります。私は選択リストをターゲットにしたい、選択リストから "Dr"を選択すると、下のdivを非表示にする必要があります。

codepen example

$(document).ready(function(){ 
var num = Dr; 
$("div#myselect select.select option").each(function(){ 
    if($(this).selected()==num){ 
     $(".test1").hide(); 
    } 
    }); 
}); 

Answer 1

ここで間違ったくさんがあります。概要：

1. Drは構文エラーです。文字列は引用符で囲む必要があります。
2. 実際に何かを選択する機会を与えずに、ページが読み込まれたときに選択した値を一度確認しています。
3. selectはclass="select"で、あなたのHTMLには存在しません。
4. またdivとid="myselect"を探していますが、これもHTMLには存在しません。
5. .selected（）関数はありません。

私はあなたがより次のような意味容疑者：

$(document).ready(function(){ 
    var num = 'Dr'; 
    $("select").change(function(){ 
     if($(this).find('option:selected').text()==num){ 
      $(".test1").hide(); 
     } 
    }); 
}); 

注変更：それは文字列なので、引用符でDrをラップ

1. を。
2. HTMLの現在の状態を直接チェックするのではなく、changeイベントハンドラを作成します。このイベントハンドラは、ターゲット要素が変更されるたびに呼び出されます。
3. セレクタをselectに置き換えて、ページ上の<select>フォーム要素をターゲットにします。ターゲットコードに<select>個以上の要素がある場合は、そのidを使用するか、さまざまな方法でターゲット<select>要素を特定することもできます。
4. changeイベントを呼び出すと、コードは<select>内の選択されたオプションを探し、そのオプションののテキストをチェックします。 （valueは数ではなく、文字列'Dr'あるので。）

私は証明するためにここにあなたのCodePenをフォークしてきました。

はまた、あなたが再ショー別のオプションが選択されている要素にしたい場合、あなたはelseブロックを追加したい：

if($(this).find('option:selected').text()==num){ 
    $(".test1").hide(); 
} else { 
    $(".test1").show(); 
} 

Answer 2

いくつかのエラー。まず、文字列を引用符で囲む必要があります。次に、誰かが変更を加えたときに選択リストをチェックしたいので、.each()ではなく、.change()イベントを使用します。数値であるので値をチェックしたくないので、.text()または.html()を使用して、.val()の代わりに選択したオプションの内容を取得します。

例：

$(document).ready(function() { 
 
    var num = 'Dr'; 
 
    $("#myselect").change(function() { 
 
    if ($(this).find('option:selected').text() == num) { 
 
     $(".test1").hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect"> 
 
    <option value="1">Mr</option> 
 
    <option value="2">Mrs</option> 
 
    <option value="3">Ms</option> 
 
    <option value="4">Dr</option> 
 
    <option value="5">Prof</option> 
 
</select> 
 

 
<div class="test1">test1</div>