title: How can I open bootstrap modal on select box option change?
body: <p>I have a form which is submitted on option change. It is connected to the database. So everytime I submit the form, the page reloads and the value is selected (the value is now saved as "car" in the database).</p>
  
  <pre><code>&lt;form class="cars" id="carSelect" name="car" action="index.php" method="get"&gt;
   &lt;select onchange='this.form.submit()'&gt;
    &lt;option &lt;?php if ($row['car'] == Volvo ) echo 'selected'; ?&gt; value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option &lt;?php if ($row['car'] == Saab ) echo 'selected'; ?&gt;  value="saab"&gt;Saab&lt;/option&gt;
    &lt;option &lt;?php if ($row['car'] == Opel ) echo 'selected'; ?&gt;  value="opel"&gt;Opel&lt;/option&gt;
    &lt;option &lt;?php if ($row['car'] == Audi ) echo 'selected'; ?&gt; value="audi"&gt;Audi&lt;/option&gt;
   &lt;/select&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>when the form is submitted and the selected option is <code>Volvo</code>, a modal (I am using the bootstrap modal) should appear. This is the bootstrap modal code, which opens the modal when I click on the "openBtn" Button.</p>
  
  <pre><code>&lt;a href="#" class="btn btn-default" id="openBtn"&gt;Volvo&lt;/a&gt;
  
  &lt;div id="modal-content" class="modal fade" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
                  &lt;h3&gt;Volvo&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;
                      &lt;input type="text" id="txtname" /&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt; 
                  &lt;a href="#" class="btn" data-dismiss="modal"&gt;cancel&lt;/a&gt;
                   &lt;a href="#" class="btn btn-primary"&gt;save&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The bootstrap modal script for opening the modal with a button:   </p>
  
  <pre><code>$('#openBtn').click(function () {
      $('#modal-content').modal({
          show: true
      });
  });
  </code></pre>
  
  <p><strong>So here is my approach</strong>:</p>
  
  <pre><code>$(window).load(function(){
      if($(.cars option:Volvo).is(':selected')){
          $('#modal-content').modal({
              show: true
          });
      }
  });
  </code></pre>
  
  <p>But my code is not working. The other problem is, the modal should only appear if I selected "Volvo". Not everytime the page is loaded. But I do not know how I can detect that the form was submitted before the page is loaded. </p>