如何为数组分配链接

How to assign links to arrays

本文关键字：分配 链接 数组      更新时间：2023-09-26

我试图为每个数组分配链接，因此对于代码中的每个"主题"，我希望Q1、Q2、Q3和Q4为不同的网页提供不同的链接。因此，当按下提交按钮时，用户将被带到网页。例如，用户将转到网页，点击主题，点击问题，当他们点击提交时，他们将被带到问题页面（.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>

根据您的变量和数据，为每个问题重写此代码new Array("Q1", "Q2", "Q3", "Q4");实际上没有意义，因为这样做似乎是多余的。这可以简化为：

p.S.纯javascript对于初学者来说太方便了，请使用jQuery，而不是从这里获取jQuery

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>

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);
  });

演示：https://jsfiddle.net/hs3oLrns/1/

将"提交"输入更改为按钮，添加一个"提交"函数与按钮的onclick属性相结合。我创建的submit函数只是将所选的主题和问题添加到我创建的一些"p"HTML元素中。如果你想让按钮把用户带到一个单独的url，也许你可以用window.url="创建一个函数。Oh和我删除了第二个脚本标记，并添加了一个事件侦听器，等待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>
相关文章：