4

我有两个下拉菜单。第二个下拉列表应根据在第一个下拉列表中选择的“值”过滤数据。两个下拉列表都是从后端动态填充的

举例来说：第一个下拉列表您选择任何学生，下拉列表的值字段包含学生编号和基于所做的学生选择，第二个下拉列表应显示该特定学生的科目。要在下拉列表中显示的数据是从后端（大型机程序）添加的。我在以“*”分隔的第二个下拉数据的末尾添加了学生编号。在将数据传递到屏幕之前，我根据后端的学生编号对数据进行排序

这是我第一次尝试 html 和 javascript 代码更改（我是大型机开发人员）。因此我确信有一个更简单更好的解决方案。我们使用自动生成 HTML 的内部工具。我只需要提供 dropdown-ID ，会自动生成其他代码，例如“select”、“options”等。因此，从 dropdown2 过滤数据后，应该隐藏并显示一个新的下拉列表，其中不包含我添加的“学生编号”和“*”。

如果从第一个下拉列表中选择了 student1，则第二个 dropdwon 应显示主题 1 主题 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 即最后一个下拉列表之后有一个搜索按钮。“值”字段中的数据被传递到后端以加载网格。所以基本上后端为每个下拉列表填充所有可能的值，当用户点击搜索时，每个 dropdwon 的“值”字段用于生成网格。

任何帮助都可以指导我以有效的方式执行此操作。请提供代码片段以及您的建议，因为我可能需要很长时间才能弄清楚您想说什么，因为我是前端新手语言。 PS：我只能使用 HTML 和 Javascript（不能使用 Php、Jquery 和其他）。

4

1 回答 1

0

如果您可以简单地隐藏未使用的值，则可以通过相对简单的检查来做到这一点：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;​
​
于 2012-11-07T15:58:46.583 回答