jquery - 根据选择 jQuery 动态更改 iframe 的 DIV 类

Question

所以我有一个下拉菜单:

 <select id="mySelect">
  <option value="" disabled selected> Select a Report</option>
  <option value="https:report1">Report1</option>
  <option value="https:report2">Report2</option>
</select>

...和 ​​iframe div，默认情况下，在从下拉列表中进行任何选择之前，显示设置为无。

<div>
  <iframe style="display:none" id="myiframe"  frameborder="0" scrolling="no" width="900" height="600"></iframe>
</div>

下拉菜单的值被传递给更新 iframe 的 jquery 函数。

    // SELECT MENU
  $("#mySelect").change(function() {
    var value = $(this).val();

    //TAG
    console.log(value);
    $("#myiframe").attr({'src':value,'style':''});
  })

当从下拉列表中选择报告时，我需要将 iframe 显示在格式化的 div 类中。

.iframe-container {
  overflow: hidden;
  padding-top: 30%;
  position: relative;
}

我想这很简单，但是有没有一种方法可以增加仅在从下拉列表中选择值时才应用类的灵 active ？

谢谢

Answer 1

在这里您可以根据下拉选择检查更改类。

$("#mySelect").change(function() {
    var value = $(this).val();
    $("#jsChangeClass").attr('class',value);
    //TAG
    console.log(value);
    $("#msg").html(value);
    $("#myiframe").attr({'src':value,'style':''});
    alert("Change div class -> "+$("#jsChangeClass").attr('class'));
  })

.iframe-container {
  overflow: hidden;
  padding-top: 30%;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="" disabled selected> Select a Report</option>
  <option value="https:report1">Report1</option>
  <option value="https:report2">Report2</option>
</select>
<span id="msg"></span>
<div id="jsChangeClass" class="">
  <iframe style="display:none" id="myiframe"  frameborder="0" scrolling="no" width="900" height="600"></iframe>
  
</div>