php - 根据选择框上的 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) -- 输出 -> ,

我该怎么做？

B.

与上面相同的问题，除了；我们将向 PHP 文件发出 AJAX 请求，而不是根据选择框值直接打印图片链接。 PHP 将返回有关 selectbox 中所选值的附加信息。 (例如，如果您选择“值 2”，它可能会从数据库获取其价格、stock_count 或 picture_path 或 w/e。)

根据返回的值，我们将从数据库中获取 image_path 值，因此它可能会打印 my_cute_dog.jpg，而不是打印 2.jpg。

我该怎么做？如果您能指导我，我会很高兴。

谢谢你， 安尼尔

诗。无需编写 PHP 代码。只要给我 PHP 文件名、参数和方法即可。 (首选 POST)。我只需要一些基本的 jQuery/JS 帮助或指导。

诗。 2 您可以随意命名 div。

Answer 1

你问题的第一部分很简单。绑定(bind)到下拉列表的更改事件。然后访问$(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);

});