根据另一个下拉框的值，使用JavaScript从数组中填充下拉框。

Question

我有两个下拉菜单。第二个下拉菜单应该根据第一个下拉菜单选择的“值”筛选数据，两个下拉菜单都是从后端动态填充的。

比如说：在第一个下拉菜单中选择任何一个学生，下拉菜单的值字段包含学生编号，根据所选的学生选择，第二个下拉菜单应该显示该特定学生的科目。要在下拉菜单中显示的数据是从后端（主机程序）添加的。我已经在第二个下拉菜单数据的末尾添加了学生编号，用“*”分隔。在传递到屏幕之前，我会从后端按照学生编号对数据进行排序。

这是我第一次尝试更改HTML和JavaScript代码（我是一名主机开发人员）。因此，我相信有更简单、更好的解决方案。我们使用一个内部工具自动生成HTML。我只需要给出下拉菜单ID，其他代码，如“select”、“options”等，则会自动生成。

因此，在从下拉菜单2过滤数据后，应该隐藏下拉菜单并显示一个新的下拉菜单，其中不包含我添加的“学生编号”和“*”。

如果从第一个下拉菜单中选择学生1，则第二个下拉菜单应该显示： Subject 1 Subject 2

    HTML
<div id="dropdrop1">
<select name="StudentC" size="1" onchange="Change()" id="studentCID">
<option value="ALL">All Students</option>
<option value="0123456789">0123456789 - Student 1</option>
<option value="0023456789">0023456789 - Student 2 </option>
</select> </div>

<div id="dropdown2">
<select name="StuclassC" size="1" id="StuclassCID">
<option value="ALL">All Class</option>
<option value="1111111111">1111111111 - Subject 1 0123456789</option>
<option value="2222222222">2222222222 - Subject 2 0123456789</option>
<option value="3333333333">3333333333 - Subject 3 0023456789</option>
<option value="4444444444">4444444444 - Subject 4 0023456789</option>

<select name=newdropdown  id= "newdropdown"></select> 

在此之后有一个搜索按钮，点击后会弹出一个网格。

Javascript

    Change()
{
// text from  dropdown2
var aname = document.getElementById("StuclassCID");
var aopts = aname.options;
var adtext = new Array();
var advalue = new Array(); 
for(i = 0; i < aopts.length; i++)
{
    adtext.push(aopts[i].text);
    advalue.push(aopts[i].value);
}

//copy selected student no from dropdown1

var StuDD = document.getElementById("studentCID");
var Stuno = StuDD.options[StuDD.selectedIndex].value;


//Search for '*' in each string from dropdown2

var i,j,temp,Stunogreater;
var studrop = new Array();
var stunoa = new Array();
var showarray = new Array();
var showvalue = new Array();

var Stunogreater =False;

//Copying 'All Class' text dropdown2

 studrop.push(adtext[0]);

//separate the displayable portion from student no in the dropdown2

for (var i = 1; i < adtext.length; i++)
 {
     temp = adtext[i]; 
     var n=temp.indexOf("*");
     studrop.push(temp.substr(0, n-1));
     stunoa.push(temp.substr(n+1,10));
 }    


while( Stunogreater == False )
{
for(var j =0; j < studrop.length;j++)
 {
   if( stunoa[j] == stuno)    
     {
       showarray.push( studrop[j]);
       showvalue.push(stunoa[j]);
      }
   if (stunoa[j] > stuno)  Stunogreater = True;
  }
}         


//Copy text and value to show in a new dropdown

var sel = document.getElementById('newdropdown');
for(var i = 0; i < showarray.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = showarray[i];
    opt.value = showvalue[i];
    sel.appendChild(opt);
}

目前文字环境不可用，直到下周才能确定这段代码是否有效。在最后一个下拉菜单dropdown2后面有一个搜索按钮，当用户点击搜索时，“Value”字段中的数据将传递给后端以加载网格。因此，基本上后端会填充每个下拉菜单的所有可能值，当用户点击搜索时，每个下拉菜单的“Value”字段用于生成网格。

如果您能以高效的方式指导我完成此操作，任何帮助都将不胜感激。请随附代码片段和建议，因为我是前端语言的新手，可能需要很长时间才能弄清楚您想说什么。 注意：我只能使用HTML和Javascript（不能使用PHP、jQuery等其他语言）。

- Prad

---

为什么不使用jQuery？它不就是JavaScript吗？ - Bergi

你如何按学生存储科目（以在下拉列表2中显示）？那里看不到任何相关的数据结构。请向我们展示从您的后端（主机程序）生成它的相关代码 - 您可能需要更改它。 - Bergi

如果你将其分成更小的逻辑部分，你也许会发现调试这个程序会更容易，所以：
1)检测下拉列表1中的更改
2)从主机获取数据
3)清除下拉列表2中的当前元素
4)一旦接收到，将新列表添加到下拉列表2中
我可以非常肯定地保证，你可以找到如何完成每个任务的答案（其中一些你已经有了），这些块将比单个change()函数更容易调试。 - MaxPRafferty

下拉菜单2最初是否包含所有可能的值？ - MaxPRafferty

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/19232/discussion-between-prad-and-maxprafferty - Prad

Answer 1

如果您只想隐藏未使用的值，可以通过相对简单的检查来实现： http://jsfiddle.net/MaxPRafferty/SEmwG/ HTML：

<select id="dropdown1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select id="dropdown2">
<option>1</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
​

CSS：

.hiddenElement{display:none;}​

js：

var dropdown1 = document.getElementById("dropdown1");
var dropdown2 = document.getElementById("dropdown2");
var change = function() {
    alert("here");
    for (var i = 0; i < dropdown2.length; i++) {
        if (dropdown2[i].value.indexOf(dropdown1.value) === -1) {
            dropdown2[i].className = "hiddenElement";
        }
        else {
            dropdown2[i].className = "";
        }
    }
}

dropdown1.onchange = change;​
​

- MaxPRafferty