Jquery select, sınıf

Question

'u eklemek yerine Jquery'yi öğreniyorum. Seçilen seçenekleri anlamaya çalışıyorum. Kullanıcı bir seçenek belirlediğinde bir şeyler yapabilirim.

ben kullanıyorsunuz

$(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

kullanın unutmayın.

"Değişiklik" olayını dinlemelisiniz ve $ (document) .ready() içinde olmalıdır, bu tür olaylar pencerede/DOM yükünde bağlanır. Böyle

deneyin şey:

Answer 2

customAmountinput için 'xxx' o bir sınıf eklemek gerektiğini kullanıcı customAmountSelected seçtiğinde böylece jQuery çalıştırmaya çalışırken eğer yanlış yere beyanı . Bu şekilde if belge yükünde bir kez değerlendirilir ve budur. Öyle gibi girdi change olaya o bağlamak gerekir:

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

Answer 3

seçeneğini değiştirerek ederken, jQuery .change olay tetiklendiğinde. Eğer "seçili" durumunu doğrulamak için gerek kalmaz değerini almak için, sadece, sen değerini kullanımı vardır this.value

JSFIDDLE DEMO

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