隐藏/显示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]); 
});