fetching value from html select to jQuery to change css class
<p>I have a select option in my modal as seen below:</p>

<pre><code>&lt;div class="modal-body"&gt;
  &lt;select class="style" name="style" form="styleform"&gt;
    &lt;option value="Sky"&gt;Sky&lt;/option&gt;
    &lt;option value="Boulder"&gt;Boulder&lt;/option&gt;
    &lt;option value="Paper"&gt;Paper&lt;/option&gt;
    &lt;option value="Forest"&gt;Forest&lt;/option&gt;&lt;/option&gt;
  &lt;/select&gt;
 &lt;/div&gt;
</code></pre>

<p>Each of the options in select should be linked to a style in css. Namely style1, style2, style3 and style4.</p>

<p>I tried this code to add the style to my panel but it doesn't seem to be working.</p>

<pre><code>if($(".style").val()=="sky"){
  $('.panel').addClass("style1");
}
</code></pre>

<p>I also tried removing the existing/default class of the panel but that also didn't work.</p>