Question

我有一个<select?元素，其中包含各种<option>元素。上面有一个文本输入，它通过Ajax将数据提交给PHP脚本，并根据MySQL查询的结果返回一个JSON数组。数据库查询的结果对应于<select>选项的值。

我想要做的只是显示其值可以在JSON数组中找到的<option>元素。下面是我到目前为止使用的代码。我一直在尝试不同的方法让它发挥作用，但努力想出来。

有人可以帮忙吗？

守则：

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)返回此内容（'modules'来自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 &amp; Sustainability in FM",
         "m403":"4.03 Customer &amp; Stakeholder Relations in FM",
         "m404":"4.04 FM Specification &amp; Procurement",
         "m405":"4.05 Health &amp; 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 &amp; 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]);
});

隐藏/显示HTML根据JSON数组中的匹配值选择选项

3 个答案: