jquery - 从 html select 中获取值到 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>

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

我尝试使用此代码将样式添加到我的面板，但它似乎不起作用。

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

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

Answer 1

您没有将代码绑定(bind)到任何事件，因此永远不会执行此代码:

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

文档.ready是等待dom准备好，.change是监听用户改变选项

请注意，您的代码区分大小写，因此在您的原始代码中，您的 if 永远不会评估为真，因为“天空”与“天空”不同