title: jQuery ComboBox: No matter what I try, I can't get back value back to my select box (can't programmatically select desired option)
body: <p>I have really put efforts in searching for possible answers here and on Google. I did find some answers but when I apply them to my code and my situation, it just doesn't work.</p>
  
  <p>I tried:</p>
  
  <pre><code>$("select#city option['City, ST']").attr('selected', 'selected');
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>$("select#city").val('City, ST');
  </code></pre>
  
  <p>as suggested somewhere.</p>
  
  <p>I tried putting this code to a document.ready function - to no avail. I then tried placing it at the top (not in the head section though) with no document.ready but still the same.</p>
  
  <p>What could be the reason for this function to fail? Is the moment when it's called important (I mean, does it matter if my select box with values render first and then the function gets called? Or could it be something else?</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="ui-widget"&gt;
              &lt;h3&gt;Location&lt;/h3&gt;
              &lt;form id="chooseCity" class="" action="" method="post"&gt;
                  &lt;select id="city" name="city"&gt;
  
                      &lt;option value="Select Town"&gt;Select Town&lt;/option&gt;
                      &lt;option value='Acworth, NH'&gt;Acworth, NH&lt;/option&gt;
                      &lt;option value='Alstead, NH'&gt;Alstead, NH&lt;/option&gt;
                      &lt;option value='Alton, NH'&gt;Alton, NH&lt;/option&gt;
                      &lt;option value='Alton Bay, NH'&gt;Alton Bay, NH&lt;/option&gt;
                      &lt;option value='Amherst, NH'&gt;Amherst, NH&lt;/option&gt;
                      &lt;option value='Andover, NH'&gt;Andover, NH&lt;/option&gt;
                      &lt;option value='Antrim, NH'&gt;Antrim, NH&lt;/option&gt;
                      &lt;option value='Concord, NH'&gt;Concord, NH&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Could this loop be the culprit? Maybe it's somehow interferring:</p>
  
  <pre><code>                &lt;option value="Select Town"&gt;Select Town&lt;/option&gt;
                      &lt;?php foreach($arr as $city):
                          echo "&lt;option value='{$city}'";
                          echo ($_POST['city-hp'] == $city) ? 'selected' : '';
                          echo "&gt;".$city."&lt;/option&gt;".PHP_EOL;
                      endforeach; ?&gt;
  </code></pre>
  
  <p>IMPORTANT EDIT:</p>
  
  <p>I've discovered that this piece of code:</p>
  
  <pre><code>$(function() {
      $( "#city" ).combobox();
      $( "#toggle" ).click(function() {
          $( "#city" ).toggle();
      });
  });
  </code></pre>
  
  <p>is preventing my combobox to programmatically select desired value.
  But this piece of code is crucial for styling the select box. I've downloaded the example from the jQuery UI website and integrated it into my website.</p>
  
  <p>How can the above code be modified to retain its appearance while allowing for the desired functionality?</p>