Question

我希望有人可以帮我解决一个小问题。

我有以下代码可根据前一个框中选择的内容更改组合框条目。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Representation of AJAX</title>
<script type="text/javascript">
   function update(str)
   {
   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("data").innerHTML = xmlhttp.responseText;
    }
  }

  xmlhttp.open("GET","demo.php?opt="+str, true);
  xmlhttp.send();
  }
</script>

</head>
<body>
  <select id="optionA" onchange="update(this.value)">
    <option value="0">Select...</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
  </select>
  <br/>
  <select id="data">
    <option>Select an Option...</option>
  </select>
</body>
</html>

并且

<?php
  $opt = $_GET['opt'];

  switch($opt)
  {
    case 0:
    default:
      echo '
            <option>Select an Option...</option>
           ';
        break;
    case 1:
    echo '
        <option value="opt1_1">Option1_Test1</option>
        <option value="opt1_2">Option1_Test2</option>
        <option value="opt1_3">Option1_Test3</option>
       ';
        break;
    case 2:
    echo '
        <option value="opt2_1">Option2_Test1</option>
        <option value="opt2_2">Option2_Test2</option>
        <option value="opt2_3">Option2_Test3</option>
       ';
    break;
  }
 ?>

我并不是非常熟悉Javascript，所以想知道是否可以修改javascript（我认为可以自己处理的第二块代码）来执行下面描述的操作。

框1包含一行图像，用作链接，当单击一个图像时，这些图像下方的第二个框将根据框1中的选择填充更多图像链接（从数据库中获取信息）。 p>

我从有限的理解中想象，我应该能够将'onchange'js事件修改为onclick或者在'img'标签内修改等同物（不记得我的头顶）事件，或者是'a href'标签，再也记不起现在。

希望有人能理解我正在做的事情并理解这一切：）

由于 TheMightySpud

Answer 1

这是您可能需要的示例，它是与ajax调用相关联的一些图像。用你的第一个代码替换下一个代码并运行它。

<html>
<head>
<title>Representation of AJAX</title>
<script type="text/javascript">
   function update(str)
   {
   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("data").innerHTML = xmlhttp.responseText;
    }
  }

  xmlhttp.open("GET","demo.php?opt="+str, true);
  xmlhttp.send();
  }
</script>

</head>
<body>
  <table>
    <tr>
      <td>
        <img src="http://bestinspired.com/wp-content/uploads/2015/03/Beautiful-nature-26-825x510.jpg"
             onclick="update(1)" width="100" height="100"/>
       </td>
      <td>
        <img src="http://bestinspired.com/wp-content/uploads/2015/03/121nature.jpg"
             onclick="update(2)" width="100" height="100"/>
      </td>
      <td>
        <img src="http://bestinspired.com/wp-content/uploads/2015/03/Natural-Wallpaper-10.jpg"
             onclick="update(3)" width="100" height="100"/>
      </td>
    </tr>
  </table>
  <select id="data">
    <option>Select an Option...</option>
  </select>
</body>
</html>

Javascript修改查询

1 个答案: