选择下拉项目时，JavaScript功能不会更新网页上的列表 [英] JavaScript function not updating lists on webpage when drop down item is picked

问题描述

我有一个网站，我希望使用javascript函数更新列表1和列表3中的项目。 https://i.stack.imgur.com/neJUO.pngalt =在这里输入图片描述>

HTML

 < select name =department_listselected =Allstyle =min-width：80pxonchange =checkTeacherList（ this.value''<？php echo $ user_login;？>'）; > 
 ...代码来填充列表1 
< / select> 
< / td> 
 
< td> 
< div id =departmentTeachers>< / div> 
< / td> 
 
< td> 
< div id =nondepartmentTeachers>< / div> 
< / td> 
  

JAVASCRIPT

 < script type =text / javascript> 
函数checkTeacherList（departmentName，schoolName）
 {
 var xmlhttp; 
 
 if（window.XMLHttpRequest）
 {//代码为IE7 +，Firefox，Chrome，Opera，Safari 
 xmlhttp = new XMLHttpRequest（）; 
} 
 else 
 {//代码为IE6，IE5 
 xmlhttp = new ActiveXObject（Microsoft.XMLHTTP）; 
} 
 
 xmlhttp.onreadystatechange = function（）
 {
 if（xmlhttp.readyState == 4&& xmlhttp.status == 200）
 {
 document.getElementById（departmentTeachers）。innerHTML = data [teacher1]; 
 document.getElementById（nondepartmentTeachers）。innerHTML = data [teacher2]; 
} 
} 
 
 var d = new Date（）; 
 
 xmlhttp.open（GET，http：//website/getTeacherInfo.php？schoolName =+ schoolName +& departmentName =+ departmentName +& nocache =+ d.getSeconds （），真正）; 
 
 alert（test1）; //此警报显示
 var data = JSON.parse（xmlhttp.responseText）; 
 alert（test2）; //此警报不显示
 
 xmlhttp.send（）; 
} 
< / script> 
  

PHP

  .....产生两个字符串的代码$ teacherList1& $ teacherList2（正常工作
 
 //以JSON类型返回
头（'Content-Type：application / json'）; 
 //以json格式回复
 echo json_encode（array（'teacher1'=> $ teacherList1，'teacher2'=> $ teacherList2））; 
  

<在IE中，列表内容不能简单地用innerHTML代替。

如果你在数组中有一个数组，服务器响应，存储如下：

  var options = ['A'，'B'，'C'，'D' ]; 
  

您可以这样做：

  var deptteachers = document.getElementById（'departmentTeachers'）; 
 deptteachers.innerHTML =''; //清除列表
 
 for（var i = 0; i< options.length; i ++）{
 var option = document.createElement（'option'）; 
 options.innerHTML = options [i]; 
 option.setAttribute（'值'，选项[i]）; 
 deptteachers.appendChild（option）; //添加元素nt;这在IE 
} 
  

编辑：

 函数load_select（id，objs）{
 var d = document.getElementById（id）; 
 d.innerHTML =''; 
 
 for（var i = 0; i< objs.length; i ++）{
 var option = document.createElement（'option'）; 
 option.innerHTML = objs [i]; 
 option.setAttribute（'value'，objs [i]）; 
 d.appendChild（option）; 
} //为
} 
  

然后调用函数：

  load_select（'teacherList1'，data）; 
  

如果您想优化代码，您可以在一个函数中进行数据拆分。确保数据是一串字符串。

I have a website where I want to use a javascript function to update List 2 and List 3 when an item from List 1 is picked.

HTML

<select name="department_list" selected="All" style="min-width:80px" onchange="checkTeacherList(this.value, '<?php echo $user_login;?>');" >
... code to populate List 1
</select>
</td>

<td>
<div id="departmentTeachers"></div>
</td>

<td>
<div id="nondepartmentTeachers"></div>
</td>

JAVASCRIPT

<script type="text/javascript">
function checkTeacherList(departmentName, schoolName) 
{
var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("departmentTeachers").innerHTML = data["teacher1"];
 document.getElementById("nondepartmentTeachers").innerHTML = data["teacher2"];
 }
}

var d = new Date();

xmlhttp.open("GET","http://website/getTeacherInfo.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);

alert ("test1"); // this alert displays
var data = JSON.parse(xmlhttp.responseText);
alert ("test2"); // this alert does not display

xmlhttp.send();
}
</script>

PHP

..... code that produces two strings $teacherList1 & $teacherList2 (which work correctly

// return with a JSON type
header('Content-Type: application/json');
// reply with json format
echo json_encode(array('teacher1' => $teacherList1, 'teacher2' => $teacherList2));

解决方案

In IE, list content cannot be simply replaced with innerHTML.

If you have an array in the server response that stored as following:

var options=['A','B','C','D'];

you can do this:

var deptteachers=document.getElementById('departmentTeachers');
deptteachers.innerHTML=''; //clear the list

for (var i=0;i<options.length;i++){
  var option=document.createElement('option');
  options.innerHTML=options[i];
  option.setAttribute('value',options[i]);
  deptteachers.appendChild(option); //add the element; this works in IE
}

Edited:

function load_select(id,objs){
  var d=document.getElementById(id);
  d.innerHTML='';

  for (var i=0;i<objs.length;i++){
        var option=document.createElement('option');
    option.innerHTML=objs[i];
    option.setAttribute('value',objs[i]);
    d.appendChild(option);
  }  //for
}

then call the function:

load_select('teacherList1',data);

You could do a data split in one function if you want to optimize the code. Make sure "data" is an array of strings.

这篇关于选择下拉项目时，JavaScript功能不会更新网页上的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！