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修改查詢

回答

相關問題