jquery - 从html select到jQuery中获取值以更改css类

我的模态中有一个选择选项，如下所示：

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

select中的每个选项都应链接到css中的样式。即style1，style2，style3和style4。

我尝试使用此代码将样式添加到面板中，但似乎无法正常工作。

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

我还尝试删除了面板的现有/默认类，但这也没有用。

最佳答案

您没有将代码绑定到任何事件，因此该代码将永远不会执行：

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

文档.ready将等待dom准备就绪，并且.change将监听更改选项的用户

请注意，您的代码区分大小写，因此在您的原始代码中，如果“ sky”与“ Sky”不同，则if永远不会为true

关于jquery - 从html select到jQuery中获取值以更改css类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35427516/