根據選擇框上的ajax回覆獲取隨機圖像？

Question

我目前有一個如下所示的HTML選擇框。

<select name="item_1"> 
     <option value="0">Choose one...</option> 
     <option value="1">Value (1)</option> 
     <option value="2">Value (2)</option> 
     <option value="3">Value (3)</option> 
</select> 

我必須做到以下幾點。無論哪種方式都有效，但如果可能的話，我想學習兩種方法。

A.

1. 想象有3倍的不同選擇框稱爲ITEM_1，ITEM_2和ITEM_3。
2. 想象一下當前文檔任何位置的div（或表格）。
3. 每當選擇框上的值發生變化時，div應該包含帶有選項值的圖片的鏈接。

例如，如果在「item_1」選擇框中選擇了「Value（2）」，那麼它應該在div上打印2.jpg。如果在其他選擇框中有選定的值，它也應該打印它們的圖像。

實施例： ITEM_1 - >值（2） - ITEM_2 - >值（3） - 輸出 - > < IMG SRC = 「2.JPG」>，< IMG SRC = 3.JPG「>

我怎樣才能做到這一點

B.

同樣的問題如上，除;而不是直接打印取決於選擇框值的圖片鏈接，我們會做一個AJAX請求我們PHP文件.PHP將返回添加有關選擇框中所選值的信息。 （例如，如果選擇「值2」，它可能會從數據庫中獲得價格，stock_count或picture_path或w/e）。

根據返回的值，我們將從數據庫中獲取image_path值，而不是打印2。 JPG，它可能會打印my_cute_dog.jpg。

我該怎麼做？如果你能指導我，我會很高興。

謝謝 阿尼爾

詩篇。無需編寫PHP代碼。只需給我PHP文件名，參數和方法。 （POST首選）。我只需要一些基本的jQuery/JS幫助或指導。

Ps。 2你可以根據你的需要命名div。

Answer 1

您的問題的第一部分很容易。綁定到您的下拉列表的更改事件。然後訪問$(this).val()以獲取新選擇的值。

然後，您可以將現有圖像的src屬性修改爲新值。請注意，我在這裏使用prop，因爲我使用jQuery 1.7+。如果您不使用較新的jQuery，請改爲使用attr。

最後有一些AJAX方法已經熟成jQuery。我選擇load，但您可以使用更復雜的東西，如get或ajax，以更精細地控制返回的值。 Load基本上需要服務器返回的內容並將其填充到匹配的元素中。

http://jsfiddle.net/LHpJd/

//for select list with id of `select` 
$('#select').change(function() { 
    var value = $(this).val(); 
    //directly set value as html 
    $('#output').html(value); 

    //change image url source 
    $('#output img').prop('src', 'http://' + value); 

    //change image url source from server (expected return value is something like <img src="" /> 
    $('#output').load('myfile.php?' + value); 

}); 

Answer 2

我強烈建議你使用jQuery。 讓我們假設這是你的HTML。

<select class="item_1"> 
    <option value="0">Choose</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <select class="item_2"> 
    <option value="0">Choose</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 

答：

$(document).ready(function() { 
    // Handler for first select box 
    $('.item_1').change(function() { 
     alert('Handler for item_1 called.'); 
    }); 
    // Handler for second select box 
    $('.item_2').change(function() { 
     alert('Handler for item_2 called.'); 
    }); 

}); 

乙 是的，你應該使用PHP或任何其他服務器端語言。但我有一點建議/問題？

根據返回的值，我們會得到 數據庫IMAGE_PATH值，而不是印刷2.JPG的，它可以打印my_cute_dog.jpg。

您不需要調用另一個php文件來獲取圖像路徑，只需在PHP中寫入所有內容並將JSON編碼數據返回給javascript即可。對於這種情況，我建議您添加額外的按鈕，但是這是可選的。讓我們寫一些代碼添加這裏面document.ready（）

$('#get_data').bind('click', function() { 

    // get current values from select boxes. 
    var item_1 = $(".item_1").val(); 
    var item_2 = $(".item_2").val(); 

    //Sending AJAX POST Request. 
    $.post("example.php", { name: "value", name_2: "value_2" }, 
     function(data) { 
     alert(data); // print data | you can use this data. 
     }); 
});