Question

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

例如说：您选择任何学生的第一个下拉菜单，下拉列表的值字段包含学生号码＆amp; amp;根据学生的选择，第二个下拉列表应显示该特定学生的科目。要在下拉列表中显示的数据是从后端（大型机编程）添加的。我在第二个下拉数据末尾添加了学生号，用'*'分隔。在将数据传递到屏幕

之前，我会根据后端的学生数对数据进行排序

这是我第一次尝试使用html＆amp; javascript代码更改（我是大型机开发人员）.Hence我确信有一个更简单，更好的解决方案。我们使用自动生成HTML的内部工具。我只需要提供下拉ID，其他代码如'select'，'options'等是自动的产生。因此，在过滤掉dropdown2中的数据后，应该隐藏一个新的下拉列表应显示不包含我已添加的'student no'和'*'。

如果从第一个下拉列表中选择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);
}

嗯，我不知道这段代码是否会起作用，因为文本环境目前无法使用，直到下周。在下拉列表2之后有一个搜索按钮，即最后一个下拉列表，当用户点击搜索时。 “值”字段中的数据将传递给beackend 加载网格。所以基本上后端会为每个下拉列表填充所有可能的值，当用户点击搜索时，每个dropdwon的'Value'字段用于生成网格。

在指导我以有效的方式执行此操作时，任何帮助都会受到赞赏。请提供代码片段以及您的sugesstions，因为我可能需要很长时间来弄清楚您尝试说什么，因为我是新的到前端语言。 PS：我只能使用HTML和Javascript（不是Php，Jquery和其他人）。

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;

Javascript根据另一个下拉列表的另一个值从数组中填充下拉列表：

1 个答案: