I have two dropdowns. The second drop-down list should filter the data based on the "value" selected in the first drop-down list. Both drop-down lists are dynamically populated from the backend.
For example, say: in the first drop-down list, you select any student, the value field of the drop-down list contains student no and, based on the selected student selection, the subjects of this particular student should be displayed in the second drop-down list. The data that will be displayed in the drop-down list is added from the backend (mainframe prog's). I added the student no at the end of the two drop-down data separated by the "*" symbol. I sort student-based data from the backend, before transferring it to the screen
This is my first attempt at modifying html and javascript (I am a mainframe developer). I am sure there is an easier and better solution. We use a built-in tool that automatically generates HTML. I just need to specify a dropdown identifier, another code, such as "select", "parameters", etc., Automatically generated. Therefore, after filtering, the data from dropdown2 should be hidden and a new drop-down menu should be displayed that does not contain the "student no" and "*" that I added.
if student1 is selected from the first drop-down menu, then the second dropdwon should display Topic 1 Topic 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 after that a search button appears that fills the 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 don't know if this code will work, since the text environment is currently unavailable until next week. And there is a search button after dropdown2, that is, the last drop-down list when the user clicks on the search. The data in the Value fields is passed to the beackend to load the grid. Thus, basically the backend fills all possible values for each drop-down list, and when users click on the search, the “Value” field of each dropdwon is used to create a grid.
Any help is appreciated when I recommend doing this in an efficient manner. Please provide code snippets along with your suggestions, as far as possible, that I can take a long time to understand what you are trying to say, as I am new to the interface languages. PS: I can only use HTML and Javascript (not for Php, JQuery and others).