クラスを追加するよりもJquery selectが選択されています

Question

Jqueryを学習しています。私は選択されたオプションを理解しようとしています。 ユーザーがオプションを選択したときに何かできることがあります。

私はあなたが使用している

$(document).ready(function() { 
 
    if ($("#amountSelected:selected").val() == 'customAmountSelected') { 
 
    $('.customAmountinput').addClass('xxx'); 
 
    } 
 
});

.displaynone { 
 
    display: none; 
 
}

<div> 
 
    <div class="form-group"> 
 
    <label>Budget (&pound;)</label> 
 
    <select class="form-control" id="amountSelected"> 
 
     <option selected="selected">No budget</option> 
 
     <option value="5">£5</option> 
 
     <option value="30">£10</option> 
 
     <option value="20">£20</option> 
 
     <option value="50">£50</option> 
 
     <option value="100">£100</option> 
 
     <option value="customAmountSelected">Custom</option> 
 
    </select> 
 
    <p class="small"><em>Need some text here to explain why they can edit budget </em> 
 
    </p> 
 
    </div> 
 
    <!-- appear when user selected custom budget --> 
 
    <div class="form-group displaynone customAmountinput"> 
 
    <label>Enter ammount</label> 
 
    <input class="form-control" placeholder="&pound;"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="checkbox"> 
 
     <label> 
 
     <input type="checkbox" value checked>Post to wall? 
 
     </label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

を使用するあなたは値を処理しているので、あなたは、「選択」の状態を検証する必要はありません。

イベント "change"を聞く必要があります。イベントは$（document）.ready（）内になければなりません。その種類のイベントはウィンドウ/ DOMの負荷にバインドされます。

$(document).ready(function() { 
 
    $("#amountSelected").change(function(){ \t 
 
    if($(this).val() == 'customAmountSelected'){ 
 
     $('.customAmountinput').addClass('xxx'); 
 
    } 
 
    }); 
 
});

Answer 2

customAmountinputに「XXX」がクラスを追加する必要があることをユーザーがcustomAmountSelectedを選択したときになるようにjqueryのを実行しようとしている場合、間違った場所に声明。このようにしてifはドキュメントのロード時に一度評価され、それだけです。あなたがそうのような入力のchangeイベントにそれをバインドする必要があります：

$("amountSelected").change(function(){ 
     if($("#amountSelected:selected").val() == 'customAmountSelected') { 
      $('.customAmountinput').addClass('xxx'); 
     } 
    }); 

Answer 3

オプションを変更しながら、jQueryの.changeイベントがトリガされます。なお、値を取得するために、ちょうどthis.value

JSFIDDLE DEMO

$("#amountSelected").change(function() { 
    if (this.value == 'customAmountSelected') { 
    $(".customAmountinput").toggleClass("displaynone xxx"); 
    } else { 
    $(".customAmountinput").addClass("displaynone"); 
    $('.customAmountinput').removeClass('xxx'); 
    } 
});