隱藏/顯示HTML選擇基於JSON數組中匹配值的選項

Question

我有一個<select?元素，其中包含各種<option>元素。上面有一個文本輸入，它通過Ajax將數據提交給PHP腳本，並根據MySQL查詢的結果返回JSON數組。數據庫查詢的結果對應於<select>選項的值。

我想要做的只是顯示<option>元素的值可以在JSON數組中找到。以下是我迄今爲止使用的代碼。我一直在嘗試不同的方式來實現這個目標，但努力想出來。

任何人都可以幫忙嗎？

驗證碼：

jQuery的（到目前爲止）

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 <option> elements 
        console.log(data); 
      } 
      }); 
     }); 

的HTML

<select id="uploadmoduleselect"> 
     <option value="choose" class="choosemod">Select Module</option> 
     <option value="401" id="m401" class="modpick">4.01 Introduction to Facilities Management</option> 
     <option value="402" id="m402" class="modpick">4.02 CSR &amp; Sustainability in FM</option> 
     <option value="403" id="m403" class="modpick">4.03 Customer &amp; Stakeholder Relations in FM</option> 
     <option value="404" id="m404" class="modpick">4.04 FM Specification &amp; Procurement</option> 
     <option value="405" id="m405" class="modpick">4.05 Health &amp; Safety Responsibilities</option> 
     <option value="406" id="m406" class="modpick">4.06 Project Management within FM Operations</option> 
     <option value="407" id="m407" class="modpick">4.07 FM Budget Management</option> 
     <option value="409" id="m409" class="modpick">4.09 FM within the context of an organisation</option> 
     <option value="411" id="m411" class="modpick">4.11 Building Maintenance in FM</option> 
     <option value="413" id="m413" class="modpick">4.13 Distaster Recovery &amp; Contingency Plans</option> 
</select> 

console.log(data)回報這個（ '模塊' 來自PHP腳本）：

Object {modules: Array[3]} 
modules: Array[3] 
0: "401" 
1: "402" 
2: "409" 
length: 3 

我正在尋找的結果（注意， '選項值' 對應於JSON數組）：

<select id="uploadmoduleselect"> 
    <option value="choose" class="choosemod">Select Module</option> 
    <option value="401" id="m401" class="modpick">4.01 Introduction to Facilities Management</option> 
    <option value="402" id="m402" class="modpick">4.02 CSR &amp; Sustainability in FM</option> 
    <option value="409" id="m409" class="modpick">4.09 FM within the context of an organisation</option> 
</select> 

Answer 1

試試這個..

success: function(data){ 
      $('#uploadmoduleselect > option').hide(); 
      $.each(data.modules,function(i,v){ 
        $('#uploadmoduleselect > option[value="'+ v+'"]').show(); 
      }); 
     } 

fiddle here

Answer 2

你需要的是：

var modules = ["401", "402", "409"]; 
$().ready(function() {  
    $("#uploadmoduleselect option").hide(); 
    modules.forEach(function (item) { 
     $("#uploadmoduleselect option[value='" + item +"']").show(); 
    }); 
}); 

這裏的JSFiddle

Answer 3

如何（未測試）

var list = { 
     "m401":"4.01 Introduction to Facilities Management", 
     "m402":"4.02 CSR & Sustainability in FM", 
     "m403":"4.03 Customer & Stakeholder Relations in FM", 
     "m404":"4.04 FM Specification & Procurement", 
     "m405":"4.05 Health & Safety Responsibilities", 
     "m406":"4.06 Project Management within FM Operations", 
     "m407":"4.07 FM Budget Management", 
     "m409":"4.09 FM within the context of an organisation", 
     "m411":"4.11 Building Maintenance in FM", 
     "m413":"4.13 Distaster Recovery & Contingency Plans", 
} 
modules = ["401","402""409"] 
$("#selectDiv").empty(); 
var sel = $("<select/>',{id:"uploadmoduleselect"}); 
sel.append($('<option/>',{class:"choosemod"}).html("Select Module")); 
$.each(modules,function(i, mod) { 
    sel.append($('<option/>',{class:"modpick",value:mod}).html(list["m"+mod]); 
});