title: Populating Select Field from Database
body: <p>I'm trying to populate a <code>select</code> field with PHP.  The problem is I can't figure out how to display them because I'm getting the one that's value matches in the database showing up twice because I'm echoing it as selected and then looping it all the results. How can I just display the <code>selected</code> one that matched the fields value and then all the ones that don't match the selected one?</p>
  
  <p><strong>TABLE CATEGORIES</strong></p>
  
  <pre><code>cat_id  cat_name
  1       soccer
  2       baseball
  3       basketball
  </code></pre>
  
  <p><strong>TABLE ARTICLES</strong></p>
  
  <pre><code>art_id art_cat_id
  1      1
  </code></pre>
  
  <p><strong>PHP / HTML</strong></p>
  
  <pre><code>&lt;select name="category"&gt;
  &lt;?php
      $sql = "SELECT cat_id cat_name, art_id, art_cat_id 
              FROM categories LEFT JOIN articles
              ON categories.cat_id = articles.art_cat_id
              WHERE art_id = 1";
      $result = query($sql);
  
      if($result===false) {
          echo("Query Fail");
      }
      else {
          ?&gt;
          &lt;option value="&lt;?php echo $data['art_cat_id'] ?&gt;" selected="selected"&gt;&lt;?php echo $data['cat_name'] ?&gt;&lt;/option&gt;
          &lt;?php
          while( $data = mysqli_fetch_array($result)) {
  
          ?&gt;     
          &lt;option value="&lt;?php echo $data['cat_id'] ?&gt;"&gt;&lt;?php echo $data['cat_name'] ?&gt;&lt;/option&gt;
          &lt;?php
          }
      }
      ?&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>What it's returning</strong></p>
  
  <pre><code>&lt;select name="category"&gt;
      &lt;option value="1" selected="selected"&gt;soccer&lt;/option&gt;
      &lt;option value="1"&gt;soccer&lt;/option&gt;
      &lt;option value="2"&gt;baseball&lt;/option&gt;
      &lt;option value="3"&gt;basketball&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>What I'm looking for</strong></p>
  
  <pre><code>&lt;select name="category"&gt;
      &lt;option value="1" selected="selected"&gt;soccer&lt;/option&gt;
      &lt;option value="2"&gt;baseball&lt;/option&gt;
      &lt;option value="3"&gt;basketball&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>