如何获取按钮id并使用它从javascript中的外部文件获取JSONdata

我试图在点击按钮时获取JSON数据并填充select标记。 按钮ID和JSON对象名称相同。当我将按钮ID传递给$.eachdata.Technical.x时， 它不获取任何值

但是如果我给$.eachdata.Technical.JAVA，select标签就会被填满

HTML

---

这个问题与JSON文件有关，它的格式不正确，因此$.getJSON中的success方法不会解析它。您可以使用 以下是代码： 当我们传递id或类并将其存储在另一个变量中时，我们必须使用data.Technical[x]，否则data.Technical.x是正确的

function loadJson(x) {
dropdown_clear();
var a = document.getElementById(x).text;

document.getElementById("subjTitle").innerHTML=a; 
$.getJSON("data.json", function(data) {
    $.each(data.Technical[x], function (key,value) {
        var $option = $("<option/>").attr("value",value).text(value);
                    $("#dropDownDest").append($option);
        $('#dropDownDest').change(function() {
         var x= $(this).val();
         document.getElementById("topiclabel").innerHTML=x;
        });
    });                         
});

---

}

能否添加缺少的html元素SSubjTitle、topiclabel、dropDownDest、。。。，和函数下拉菜单\u clear？@Adrian请参考更新的HTML编码有人解释为什么人们使用Jquery来处理如此简单的事情，并降低代码速度而不是使用dommethods@Phoenix寻找不必要的，

function loadJson(x) {
dropdown_clear();
var a = document.getElementById(x).text;
document.getElementById("subjTitle").innerHTML=a;
$(document).ready(function(){   
    $.getJSON('jsondata/data.json', function(data) {
        console.log(data);
        $.each(data.Technical.x, function (key,value) {
            var $option = $("<option/>").attr("value",value).text(value);
            $("#dropDownDest").append($option);
            $('#dropDownDest').change(function () {
                var x= $(this).val();
                document.getElementById("topiclabel").innerHTML=x;
            });
        });                         
    });
});}

{

"Technical": {

    "JAVA": {
        "1": "Core java ",
        "2": "Jdbc",
        "3": "Servlet",
    "4": "JSP",
    "5": "Struts 1.X",
    "6": "Ejb 2.0",
    "7": "Spring (Core , AOP, Remoting, JMX JMS)",
    "8": "Hibernate",
    "9": "Webservice",
    "10": "Maven",
    "11": "Threads Implementation",
    "12": "Design Patterns",
    "13": "Unix",
    "14": "SQL Server",
    "15": "Sybase",
    "16": "Oracle",
    "17": "Others DB (mention details)",
    "18": "Automated Unit Testing (mention tools)",
    "19": "Nunit",
    "20": "Mockito",
    "21": "Continous Build & Integration (mention tools)",
    "22": "Agile Development",
    "23": "Test Driven Development (TDD)",
    "24": "Atlassian Toolchain (JIRA, Confluence)",
    "25": "Any thing else worth highlighting",

    },
    "C++": {
        "1": "Multi-threading",
        "2": "STL",
        "3": "Boost",
    "4": "Object Oriented Design & Development",
    "5": "UNIX/Linux",
    "6": "IDEs (mention name of IDEs used)",
    "7": "Perl",
    "8": "Java",
    "9": "Scripting (mention details)",
    "10": "COM/COM+",
    "11": "Automated Unit Testing (mention tools)",
    "12": "Test Driven Development (TDD)",
    "13": "Continous Build & Integration (mention tools)",
    "14": "Agile Development",
    "15": "Any thing else worth highlighting",          

    },
    "C#": {
        "1": "Multi-threading",
        "2": "WPF",
        "3": "WCF",
    "4": "Remoting",
    "5": "ASP.NET",
    "6": "Winforms",
    "7": "Windows Services",
    "8": "3rd Party Controls (mention details)",
    "9": "Scripting (mention details)",
    "10": "COM/COM+",
    "11": "SQL Server",
    "12": "Sybase",
    "13": "Oracle",
    "14": "Others DB (mention details)",
    "15": "Automated Unit Testing (mention tools)",
    "16": "Continous Build & Integration (mention tools)",
    "17": "Agile Development",
    "18": "Test Driven Development (TDD)",
    "19": "Any thing else worth highlighting",

    },

    "Functional": {
        "1": "Front Office Systems",
        "2": "Back Office Systems",
        "3": "Middle Office Systems",
    "4": "Fixed Income Systems",
    "5": "FX Systems",
    "6": "Equities Systems",
    "7": "Pricing Systems",
    "8": "Low Latency Systems",
    "9": "Exchange/Vendor Connectivity Systems",
    "10": "Trade Capture Systems",
    "11": "Risk Management Systems",
    "12": "Any thing else worth highlighting",

    }
}}

function loadJson(x) {
dropdown_clear();
var a = document.getElementById(x).text;

document.getElementById("subjTitle").innerHTML=a; 
$.getJSON("data.json", function(data) {
    $.each(data.Technical[x], function (key,value) {
        var $option = $("<option/>").attr("value",value).text(value);
                    $("#dropDownDest").append($option);
        $('#dropDownDest').change(function() {
         var x= $(this).val();
         document.getElementById("topiclabel").innerHTML=x;
        });
    });                         
});