相關選擇使用jquery不按預期工作

我不會用jquery做很多事情，所以請原諒，如果這是一個真正的入門級問題。我有兩種選擇 - 廣泛的學術興趣類別，然後根據第一種選擇進行細化。 Firebug顯示我從函數中獲取了正確的數據，但我無法通過該數據獲得第二個選擇。相關選擇使用jquery不按預期工作

<script> 
    $("#general").change(function() { 
    $.ajaxSetup({ 
     dataFilter: function(data, type){ 
      return type == 'json' ? data.replace(/^(\/{2})?/, '') : data; 
     } 
    }); 
    //get what they selected 
    var selected = $("option:selected",this).val(); 
    //no matter what, clear the other DD 
    $("#majors").children().remove().end().append("&lt;option value=\"\"&gt;-- Select a Majors --&lt;/option&gt;"); 
    //now load in new options of selected category 
    if(selected == "") return; 
     $.getJSON(remote.cfc?method=queryMajorsRemote&returnformat=json",{"cip_fam":selected}, function(res,code) { 
      var newoptions = ""; 
      for (var i = 0; i < res.DATA.length; i++) { 
      newoptions += "&lt;option value=\"" + res[i].id + "\"&gt;" + res[i].name + "&lt;/option&gt;"; 
      } 
     $("#majors").children().end().append(newoptions); 
    }); 
}); 
</script>

HTML非常簡單 - 只有兩個選擇 - 一個ID爲#general，另一個ID爲ID_majors。

響應數據的樣本是：

[{"ID":422,"NAME":"Engineering"},{"ID":426,"NAME":"Engineering - Aerospace, Aeronautical and Astronautical"}]

來源

2017-08-12 Steve

當你想創建元素時，你不應該使用HTML實體符號（'<'） - 使用實際的'<' and '>'字符。 – Pointy

根據問題報告的響應數據的樣本，你有一些問題：

res.DATA.length必須res.length
RES [I] .ID必須RES [I] .ID
RES [I]。名稱必須是RES [I] .NAME

爲了創造而不是字符串，你可以在飛行中寫一個新的選擇，：

$('<option/>', {value: res[i].ID, text: res[i].NAME})

如果您需要附加選項之前清空第二個選擇框，你可以寫：

$("#majors").empty()

的片段：

var res = [{"ID":422,"NAME":"Engineering"},{"ID":426,"NAME":"Engineering - Aerospace, Aeronautical and Astronautical"}]; 
 

 
$("#general").change(function() { 
 
    $.ajaxSetup({ 
 
     dataFilter: function (data, type) { 
 
      return type == 'json' ? data.replace(/^(\/{2})?/, '') : data; 
 
     } 
 
    }); 
 
    //get what they selected 
 
    var selected = $("option:selected", this).val(); 
 
    //no matter what, clear the other DD 
 
    $("#majors").children().remove().end().append("&lt;option value=\"\"&gt;-- Select a Majors --&lt;/option&gt;"); 
 
    //now load in new options of selected category 
 
    if (selected == "") return; 
 
    //$.getJSON("http://localhost:63342/Projects/StackOverflow/1.json", {"cip_fam": selected}, function (res, code) { 
 
     var optionToBeAppendedTo = $("#majors").empty(); 
 
     for (var i = 0; i < res.length; i++) { 
 
      optionToBeAppendedTo.append($('<option/>', {value: res[i].ID, text: res[i].NAME})); 
 
     } 
 
    //}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<select id="general"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
<select id="majors"> 
 
    <option value="10">10</option> 
 
    <option value="20">20</option> 
 
    <option value="30">30</option> 
 
    <option value="40">40</option> 
 
</select>

來源

2017-08-12 13:18:49 gaetanoM

哇！非常感謝！！ – Steve

相關選擇使用jquery不按預期工作

回答

相關問題