A Multi-Select Form

[tinfanide]

HTML & AJAX:

<form ><select name="group" onchange="ajax(this.options[selectedIndex].value,index.options[selectedIndex].value,property.options[selectedIndex].value)"><option selected value="">Group</option><option value="students">Students</option><option value="teachers">Teachers</option><option value="parents">Parents</option></select><select name="index" onchange="ajax(group.options[selectedIndex].value,this.options[selectedIndex].value,property.options[selectedIndex].value)"><option selected value="">Index</option><option value="0">0</option><option value="1">1</option><option value="2">2</option></select><select name="property" onchange="ajax(group.options[selectedIndex].value,index.options[selectedIndex].value,this.options[selectedIndex].value)"><option selected value="">Property</option><option value="name">name</option><option value="######">######</option><option value="age">age</option></select></form><hr /><div id="result"></div> <script type="text/javascript">function ajax(group,index,property){xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");xmlhttp.onreadystatechange = function(){  if(xmlhttp.readyState==4 && xmlhttp.status==200){   var jsonData= eval("("+xmlhttp.responseText+")");   if(group==""||index==""||property==""){    document.getElementById("result").innerHTML = "Please select a field.";    } else {	 document.getElementById("result").innerHTML = jsonData[group][index][property];	 }   }  }xmlhttp.open("GET","json.json",true);xmlhttp.send(null);}</script>

JSON:

{"students": [    {name: "Tin", ######: "Male", age: 20},    {name: "Valerie", ######: "Female", age: 16},    {name: "Valeriana", ######: "Female", age: 18},],"teachers": [    {name: "Tim", ######: "Male", age: 30},    {name: "Val", ######: "Female", age: 40},    {name: "Vivian", ######: "Female", age: 50},],"parents": [    {name: "Tiffany", ######: "Male", age: 60},    {name: "Viona", ######: "Female", age: 66},    {name: "Vivi", ######: "Female", age: 68},],}

I want to build up a multiple-select form with AJAX.But when either of the options is selected, the result messes up.Here is the link:

http://lifelearning.x10.mx/json-ajax/json.html

It's a bit complicated. I cannot find a fix after millions of trials. Could anyone tell me why? Thanks.

[tinfanide]

I've found the fix myself.Got hints from some related materials. Two keys:First, I should have used ids to refer to the select options.Second, should have put the onchange event on the form tag, not each of the select tags. (does not matter much)Third, I should follow the syntax

document.getElementById(id).options[document.getElementById(id).selectedIndex].value// compare this with thisdocument.getElementById(id).options[selectedIndex].value// mixed withthis.options[selectedIndex[.value

<form name="form" onchange="ajax(document.getElementById('group').options[document.getElementById('group').selectedIndex].value,document.getElementById('index').options[document.getElementById('index').selectedIndex].value,document.getElementById('property').options[document.getElementById('property').selectedIndex].value)"><select id="group" ><option selected value="">Group</option><option value="students">Students</option><option value="teachers">Teachers</option><option value="parents">Parents</option></select><select id="index"><option selected value="">Index</option><option value="0">0</option><option value="1">1</option><option value="2">2</option></select><select id="property"><option selected value="">Property</option><option value="name">name</option><option value="######">######</option><option value="age">age</option></select></form><hr /><div id="result"></div><script type="text/javascript">window.onload = function(){}function ajax(group,index,property){xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");xmlhttp.onreadystatechange = function(){  if(xmlhttp.readyState==4 && xmlhttp.status==200){   var jsonData= eval("("+xmlhttp.responseText+")");      if(group==""||index==""||property==""){    document.getElementById("result").innerHTML = "Please select a field.";    } else {	 document.getElementById("result").innerHTML = jsonData[group][index][property];	 }   }  }xmlhttp.open("GET","json.json",true);xmlhttp.send(null);} /*function ajaxRequest(){var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IEif (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)  for (var i=0; i<activexmodes.length; i++){   try{    return new ActiveXObject(activexmodes[i])   }   catch(e){    //suppress error   }  }}else if (window.XMLHttpRequest) // if Mozilla, Safari etc  return new XMLHttpRequest()else  return false}var mygetrequest=new ajaxRequest()mygetrequest.onreadystatechange=function(){if (mygetrequest.readyState==4){  if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){   var jsondata=eval("("+mygetrequest.responseText+")") //retrieve result as an JavaScript object   var output= jsondata.name;   document.getElementById("result").innerHTML=output  }  else{   alert("An error has occured making the request")  }}}mygetrequest.open("GET", "json.json", true)mygetrequest.send(null)*/</script>