Динамически изменить класс DIV для iframe на основе выбора jQuery

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, для которого по умолчанию перед любым выбором из выпадающего списка отображается значение none.

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

Значение раскрывающегося меню передается функции jquery, которая обновляет iframe.

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