title: Hide/Show HTML Select Options based on matching values in JSON array
body: <p>I have a <code>&lt;select?</code> element which contains a variety of <code>&lt;option&gt;</code> elements within. Above there is a text input which submits data to a PHP script via Ajax and returns a JSON array based on the results of a MySQL query. The results from the database query correspond to the values of the <code>&lt;select&gt;</code> options.</p>
  
  <p>What I want to do is only display the <code>&lt;option&gt;</code> elements whose values can be found within the JSON array. Below is the code I've been using so far. I've been trying different ways of getting this to work but struggling to figure it out.</p>
  
  <p>Can anyone help?</p>
  
  <p>The Code:</p>
  
  <p><strong>The jQuery (so far)</strong></p>
  
  <pre><code>  var uploadname;
    $('.modpick').hide();
  
    $("#uploadname").focus(function(){
     uploadname = $(this).val();
     $.ajax({
              url: "uploadnames.php",
              type: "POST",
              data: {uploadname: uploadname},
                     dataType: 'json',
              success: function(data){
                       //Here is where I want to put the code to show the relevant &lt;option&gt; elements
                       console.log(data);
              }
             });
          });
  </code></pre>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;select id="uploadmoduleselect"&gt;
           &lt;option value="choose" class="choosemod"&gt;Select Module&lt;/option&gt;
           &lt;option value="401" id="m401" class="modpick"&gt;4.01 Introduction to Facilities Management&lt;/option&gt;
           &lt;option value="402" id="m402" class="modpick"&gt;4.02 CSR &amp;amp; Sustainability in FM&lt;/option&gt;
           &lt;option value="403" id="m403" class="modpick"&gt;4.03 Customer &amp;amp; Stakeholder Relations in FM&lt;/option&gt;
           &lt;option value="404" id="m404" class="modpick"&gt;4.04 FM Specification &amp;amp; Procurement&lt;/option&gt;
           &lt;option value="405" id="m405" class="modpick"&gt;4.05 Health &amp;amp; Safety Responsibilities&lt;/option&gt;
           &lt;option value="406" id="m406" class="modpick"&gt;4.06 Project Management within FM Operations&lt;/option&gt;
           &lt;option value="407" id="m407" class="modpick"&gt;4.07 FM Budget Management&lt;/option&gt;
           &lt;option value="409" id="m409" class="modpick"&gt;4.09 FM within the context of an organisation&lt;/option&gt;
           &lt;option value="411" id="m411" class="modpick"&gt;4.11 Building Maintenance in FM&lt;/option&gt;
           &lt;option value="413" id="m413" class="modpick"&gt;4.13 Distaster Recovery &amp;amp; Contingency Plans&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong><code>console.log(data)</code> returns this ('modules' comes from the PHP script):</strong></p>
  
  <pre><code>Object {modules: Array[3]}
  modules: Array[3]
  0: "401"
  1: "402"
  2: "409"
  length: 3
  </code></pre>
  
  <p><strong>The result that I'm looking for (note that 'option values' correspond to JSON array):</strong> </p>
  
  <pre><code> &lt;select id="uploadmoduleselect"&gt;
    &lt;option value="choose" class="choosemod"&gt;Select Module&lt;/option&gt;
    &lt;option value="401" id="m401" class="modpick"&gt;4.01 Introduction to Facilities Management&lt;/option&gt;
    &lt;option value="402" id="m402" class="modpick"&gt;4.02 CSR &amp;amp; Sustainability in FM&lt;/option&gt;
    &lt;option value="409" id="m409" class="modpick"&gt;4.09 FM within the context of an organisation&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>