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

Question

I have two dropdown's. The 2nd dropdown should filter the data based on the 'value' selected in the 1st dropdown.both the dropdown's are dynamically populated from the backend

Say for example: 1st dropdown you choose any student, the value field of the dropdown contains the student no & based on the student selection made, the 2nd dropdown should display the subjects of that particular student. The data to be displayed in the dropdown is added from the backend (mainframe prog's). I've added the student no at the end of the 2nd dropdown data separated by '*'. I sort the data based on student no from the backend before passing it onto screen

This is my first try at html & javascript code changes(I'm a mainframe developer).Hence I'm sure there is a easier and better solution. We use a in house tool which automatically generates the HTML. I just have to give the dropdown-ID , other code such as 'select', 'options' etc is automatically generated. Hence after filtering the data from dropdown2 should be hidden and a new dropdown should be displayed which does not contain the 'student no' and '*' which i have added.

if student1 is selected from the 1st dropdown then the second dropdwon should display 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> 

and there is a search button after this, which populates a grid.

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

Well i dont know if this code is gonna work as the text environment is currently unavailable untill next week. And there is a search button after dropdown2 ie the last dropdown, when the user clicks on search. The data in the 'Value' fields is passed on to the beackend to load a grid. So basically the backend populates all possible values for each of the dropdown and when the users clicks on search the 'Value' field of each of the dropdwon is used to generate the grid.

Any help is appreciated in guiding me to do this in a efficient way.Please provide code snippets along with your sugesstions as its possible that i might take a long time to figure out what you are tryin to say as i'm new to front end languages. PS: I can use only HTML and Javascript (no to Php, Jquery & others).

Answer 1

If you can simply hide the values not being used, you can do this with a relatively simple check: 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;​
​