выборка значение из HTML выбрать JQuery изменить CSS класс

Question

У меня есть выберите опцию в модальных, как показано ниже:

<div class="modal-body"> 
    <select class="style" name="style" form="styleform"> 
    <option value="Sky">Sky</option> 
    <option value="Boulder">Boulder</option> 
    <option value="Paper">Paper</option> 
    <option value="Forest">Forest</option></option> 
    </select> 
</div> 

Каждая из опций выбора должны быть связаны со стилем в CSS. А именно стиль1, стиль2, стиль3 и стиль4.

Я пробовал этот код, чтобы добавить стиль к моей панели, но он, похоже, не работает.

if($(".style").val()=="sky"){ 
    $('.panel').addClass("style1"); 
} 

Я также попытался удалить существующий класс по умолчанию, но это также не сработало.

Answer 1

Вы не являются обязательными для кода к любому событию, так что этот код никогда не будет выполняться:

$(document).ready(function(){ 
    $('.style').change(function(){ 
     if($(this).val()=="Sky"){ 
      $('.panel').addClass("style1"); 
     } 
    }); 
}); 

документ .ready должен ждать, пока дом будет готов и .change прислушиваться к пользователю, который изменяет опция

Обратите внимание, что ваш код чувствителен к регистру, так в исходном коде вашей, если никогда не будет вычисляться верно, так как «небо» отличается от «Sky»

Answer 2

оказывается, что это модальный, который препятствуетпроцессы в JQuery ...

что я сделал просто взял HTML выбрать из модальных и поместите его на панель заголовка

<div class="panel-heading">To do List     
    <select class="pull-right" id="style" name="style"> 
    <option value="Sky">Sky</option> 
    <option value="Boulder">Boulder</option> 
    <option value="Paper">Paper</option> 
    <option value="Forest">Forest</option> 
    </select> 
</div> 

я использовал этот код в JQuery

$('select').on('change', function() { 
    if($("#style option:selected").text()=="Sky"){ 
    $('.panel').removeClass("style2"); 
    $('.panel').removeClass("style3"); 
    $('.panel').removeClass("style4"); 
    $('.panel').addClass("style1"); 
    } 
}) 

и т. Д., Чтобы изменить стили