title: jQuery select option deselect
body: <p>I am trying to deselect a select option element with jQuery. Here is my scenario:</p>
  
  <p>I have 3 select options:<br>
  [ Select 1 ]<br>
  [ Select 2 ]<br>
  [ Select 3 ]  </p>
  
  <p><strong>Scenario:</strong> Select 1 is prefilled with data from an ajax call. So Select 1 has opt 1, opt 2, opt 3, etc.<br>
  When you select an option from Select 1, it fills Select 2 with data, and when you select from Select 2 it fills Select 3, and so on.</p>
  
  <p>Depending on what you select, it puts the values from those ":selected" options and apply to a variable called "url".</p>
  
  <p>So in the case that you only select "Select 1":<br>
  url = 'search/for/this/select1/'</p>
  
  <p>In th case that you select "Select 1" and "Select 2"<br>
  url = 'search/for/this/select1/select2/</p>
  
  <p>And so on.</p>
  
  <p>This is the way im writing the jQuery code:</p>
  
  <pre><code>var url = 'search/for/this';  
  if(element1.is(':selected')) {
    url += element1.val();    
    // makes url = 'search/for/this/select1val/';  
       if(element2.is(':selected')) {  
          url += element1.val();    
           // makes url = 'search/for/this/select1val/select2val/';  
          if(element3.is(':selected')) {  
              url += element1.val();    
              // makes url = 'search/for/this/selectval1/select2val/select3val/';  
  
           }  
      }  
  }  
  </code></pre>
  
  <p>The problem is, this requires that I de-select the next options after the previous one was selected, but since there is data that is filled in, it seems to automatically return true when it passes through the ":selected" condition check in the code example above. Any thoughts on how to accomplish this functionality? If I am not making my issue clear. Please requested more details and I will add them in. Thanks
  -Chris-</p>