Javascript修改查询

我希望有人可以帮我解决一个小问题。Javascript修改查询

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

<!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中的选择（信息从数据库中抓取）填充更多图像链接。

我从我有限的理解中想到，我应该能够将'onchange'js事件修改为onclick或任何与'img'标签内的等价物（无法记住我的头顶部）事件或'a href'标签，现在再也记不起哪一个了。

希望有人会明白我正在试图做的，使这一切感觉:)

感谢 TheMightySpud

来源

2015-07-10 TheMightySpud

我不确定我完全清楚我在找什么，这有点令人困惑，我不能解释，我也无法发布图片。但是这里有一个链接可能会更好地解释它的图像。 http://www.themightyspud.co.uk/SearchIdea.png – TheMightySpud

我只需要帮助前两个盒子，我可以为自己工作的所有其他东西我想:) – TheMightySpud

啊没有。请忽略所有的选择，带有选择的代码就是我用作起点的代码。就像你看到的，它工作正常。目标是没有选择，只有一排缩略图，每个选项一个。当用户点击其中一个图像时，下一个框下方会显示缩略图，代表下一个“级别”选项。 – TheMightySpud

这是你可能想要的一个例子，它是链接到一些图像阿贾克斯呼吁。用你的第一个代码替换下一个代码并运行它。

<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>

来源

2015-07-10 19:59:29

哦，非常感谢，我明白你的意思了。 :)我想我已经使用每张图片的

Javascript修改查询

回答

相关问题