如何分配指向數組

Question

我試着去分配指向每個陣列所以在我的代碼中的每個「主題」，我想Q1，Q2，Q3和Q4，爲不同webpages.So時提交按鈕的不同環節被按下的用戶將被帶到網頁。 因此，例如，用戶將轉到網頁，點擊主題，點擊一個問題，當他們點擊提交時，他們將被帶到問題頁面（.html或其他）。

var subjects = new Array("English", "Irish", "Maths", "German", "History", "Business", "Geogrpahy"); 
 
var questions = new Array(); 
 
questions["English"] = new Array("Q1", "Q2", "Q3", "Q4"); 
 
questions["Irish"] = new Array("Q1", "Q2", "Q3", "Q4"); 
 
questions["Maths"] = new Array("Q1", "Q2", "Q3", "Q4"); 
 
questions["German"] = new Array("Q1", "Q2", "Q3", "Q4"); 
 
questions["History"] = new Array("Q1", "Q2", "Q3", "Q4"); 
 
questions["Business"] = new Array("Q1", "Q2", "Q3", "Q4"); 
 
questions["Geogrpahy"] = new Array("Q1", "Q2", "Q3", "Q4"); 
 

 
function resetForm(theForm) { 
 
    /* reset subjects */ 
 
    theForm.subjects.options[0] = new Option("Please select a subject", ""); 
 
    for (var i = 0; i < subjects.length; i++) { 
 
    theForm.subjects.options[i + 1] = new Option(subjects[i], subjects[i]); 
 
    } 
 
    theForm.subjects.options[0].selected = true; 
 
    /* reset questions */ 
 
    theForm.questions.options[0] = new Option("Please select a question", ""); 
 
    theForm.questions.options[0].selected = true; 
 
} 
 

 
function updateModels(theForm) { 
 
    var make = theForm.subjects.options[theForm.subjects.options.selectedIndex].value; 
 
    var newModels = questions[make]; 
 
    theForm.questions.options.length = 0; 
 
    theForm.questions.options[0] = new Option("Please select a question", ""); 
 
    for (var i = 0; i < newModels.length; i++) { 
 
    theForm.questions.options[i + 1] = new Option(newModels[i], newModels[i]); 
 
    } 
 
    theForm.questions.options[0].selected = true; 
 
} 
 

 
resetForm(document.autoSelectForm);

<form name="autoSelectForm" action="" method="post"> 
 
    <select size="1" name="subjects" onchange="updateModels(this.form)"> 
 
    </select> 
 
    <select size="1" name="questions" onclick=""> 
 
    </select> 
 
    <input type="submit"> 
 
</form>

Answer 1

根據您的變量和數據，它並沒有真正意義的重寫這段代碼new Array("Q1", "Q2", "Q3", "Q4");每個問題，因爲它似乎是多餘的，以這樣做的。這可以簡化爲這樣：

附： 純JavaScript是初學者也很方便，用jQuery的，而不是從here

HTML

// we use target="_blank" and method="get" here just to show that it works 
<form id="myform" name="autoSelectForm" action="http://example.com/something.php" method="get" target="_blank"> 
    <select size="1" name="subjects" id="subjects"></select> 
    <select size="1" name="quarters" id="quarters"></select> 
    <input type="submit"> 
</form> 

得到jQuery的JS

var subjects = [ 
    { 
     subject: "English", quarters: [ 
      {name: "Q1", link: "http://example.com/engQ1.html"}, 
      {name: "Q2", link: "http://example.com/engQ2.html"} 
     ] 
    }, 
    { 
     subject: "Irish", quarters: [ 
     {name: "Q1", link: "http://example.com/irQ1.html"}, 
     {name: "Q2", link: "http://example.com/irQ2.html"} 
     ] 
    } 
] 

var s_subj = $('#subjects'); 
var s_quar = $('#quarters'); 

setDropdownOptions(subjects); 
refreshQuarters(); // load the quarters for the first subject 

    function setDropdownOptions(values){ 
     var str_subjects = ''; 
     $.each(subjects, function(i, row){ 
      str_subjects+= '<option>'+row.subject+'</option>'; 
     }); 
     s_subj.html(str_subjects); 
    } 

    function refreshQuarters(){ 
     var current_subj = s_subj.val(); 
     $.each(subjects, function(i, row){ 
      if(current_subj == subjects[i].subject){ 
       var str_quarters = ""; 
       // loop through the subject's quarters 
       $.each(row.quarters, function(col, obj){ 
        // we use data-link in storing each individual urls 
        str_quarters += '<option data-link="'+obj.link+'">'+obj.name+'</option>'; 
       }); 
       s_quar.html(str_quarters); 
      } 
     }); 
    } 

    // add listener when subject is changed 
    s_subj.change(function(){ 
    refreshQuarters(); 
    }); 

    // change the form action before submitting the form 
    $("#myform").submit(function(){ 
     // get the link from the selected quarter through data-link 
     var link = $("#quarters option:selected").data("link"); 
    $(this).attr("action", link); 
    }); 

DEMO：https://jsfiddle.net/hs3oLrns/1/

Answer 2

更改「提交」輸入按鈕，添加一個「提交」功能，以結合按鈕的onclick屬性。我創建的提交函數只是將選中的主題和問題添加到我創建的一些「p」HTML元素中。如果你想讓按鈕把用戶帶到一個單獨的URL，也許你可以用window.url =「」創建一個函數。哦，我刪除了第二個腳本標籤，並添加了一個事件監聽器，它在執行之前等待html完全加載。

function submit(){ 
    var subjects = document.getElementById("subjects").value 
    var questions = document.getElementById("questions").value 
    document.getElementById("ithquestion").innerHTML = questions 
    document.getElementById("ithsubject").innerHTML = "Subject: " + subjects 



} 

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById("button").addEventListener('click',submit,false) 
    resetForm(document.autoSelectForm); 
}) 


</script> 

<body> 
    <form name="autoSelectForm" action="" method="post" > 
    <select size="1" name="subjects" id = "subjects"  onchange="updateModels(this.form)"> 
    </select> 
    <select size="1" name="questions" id = "questions"> 
    </select> 
    <input type="button" value = "button" id = "button"/> 
</form> 
<p id = "ithsubject"></p> 
<p id = "ithquestion"></p> 
</body>