基于选择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;
}

我想象它是一个简单的东西，但是有没有办法，我可以在选择从下拉下拉下拉下来的值时应用类的灵活性？

谢谢

Answer 1

在这里您可以检查基于drop-down 选择的更改类。

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