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 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 に答える
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 に答える