Javascript 希望使用Ajax在下拉列表中加载选定选项的图像和一些文本

我在任何地方都找不到这样的好例子

基本上有一个下拉列表，每个选项值是

productID

，文本是产品名称

我想将所有选择的选项值发布到一个操作方法中，该方法将在文档就绪时返回相应的图像。图像数据将被传递给一个函数，该函数将更新DOM，然后每次从下拉列表中选择不同的选项时执行相同的函数，以仅检索和更改所选的选项/产品图像

action方法将在AJAX响应中将此选项/值的图像返回给客户端，我还想返回产品描述

响应数据类型应该是JSON，还是必须以其他方式返回它，即使用图像MIME类型的HTTP响应

下面类似的内容将收集数组中的所有选定值：

$(document).ready(function () {
    var arr = new Array();
    $('select option').each(function () {
        arr.push($(this).val());
    });

    // This below will post it off:    
    $.ajax({
        type: "POST",
        url: "/System/GetProductImages",
        data: { arr: arr },
        traditional: true,
        success: function (data) { 
            mydata = data; 
            OnSuccess(data) // <--- The function that will load/update the images
        }, 
        dataType: "json" //<--- ?
    });
});

$（文档）.ready（函数（）{
var arr=新数组（）；
$（“选择选项”）。每个（函数（）{
arr.push（$（this.val（））；
});
//以下内容将发布：
$.ajax({
类型：“POST”，
url:“/System/GetProductImages”，
数据：{arr:arr}，
传统的：是的，
成功：函数（数据）{
mydata=数据；
OnSuccess（data）//我想说您的响应应该是JSON和
图像ID
（一个从DB中识别图像的值）和
productdescription
。然后使用它在HTMl中构造动态图像元素，通过将
image ID
作为参数传递给URL，将它们的
src
标记设置为URL，并且在服务器端应该有一个处理程序来处理您的请求（比如servlet，它读取图像ID并获取图像流，然后作为响应返回）。因此，浏览器会对每个图像发出请求，并在浏览器上进行渲染。希望这对您有所帮助！
您可以使用“选择”框上的“更改”事件检索新数据：

$(document).ready(function(){

    $('select').change(function(){

        $.ajax({
            type: "POST",
            url: "/System/GetProductImages",
            dataType: 'json',
            data: { 'id': $('select').selectedIndex.val() },
            traditional: true,
            success: function (data) { 
                mydata = data; 
                OnSuccess(data) // <--- The function that will load/update the images
            }
        });


    });

});

$（文档）.ready（函数（）{
$（'select'）.change（函数（）{
$.ajax({
类型：“POST”，
url:“/System/GetProductImages”，
数据类型：“json”，
数据：{'id'：$（'select'）。selectedIndex.val（）}，
传统的：是的，
成功：函数（数据）{
mydata=数据；
OnSuccess（数据）//您好，下拉列表框是多选还是单选？谢谢..是的，这听起来比以某种方式将二进制文件推到Json上更正确。只需更改src并让浏览器加载新图像。我已经有了一个基于提供的ProductID返回图像文件的操作方法，我想我现在只需要脚本来实现y更改src，使其以所选productID结束，即GetImage/productID？=77。这正是我们获取图像的方法。
/* JQuery code */

$(document).ready(function(){

    $('select').change(function(){

        $.load("/System/GetProductImages", function(){
         // The script to run when a successful load operation takes place
        });


    });

});

/* PHP Code */

echo "<script>$('tag name').html('value you want to set'); $('img').attr('src','new image src');</script>";