1

我有一个<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>
4

3 回答 3

2

尝试这个..

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

在这里摆弄

于 2013-03-14T10:49:21.713 回答
0

怎么样(未测试)

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]);
});
于 2013-03-14T10:57:02.037 回答
0

你需要的是:

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

这是JSFiddle

于 2013-03-14T10:47:54.123 回答