Jquery 用json对象填充下拉列表

我已经用一个json对象填充了我的下拉菜单，效果很好。 目前，我正在尝试根据从下拉列表中选择的选项显示隐藏div中的图像。由于下拉列表由json对象填充，我将如何检索图像数据

Html

<form>
    <fieldset id="autoHeight">
        <legend>pod</legend>
        <h2>Cars</h2>
        <select name="drop_down" id="dropDownCars">
            <option value="None" selected="Selected">Select type</option>
        </select>
    </fieldset>
</form>
<div id="showBmw" class="hidden">
    <a href="http://cdn.iphoneincanada.ca/wp-content/uploads/2012/08/white-bmw.jpg"></a>
</div>

这就是我使用jquery填充下拉菜单的方式

$(document).ready(function() {
    $.getJSON("../cars.json", function(obj) {
        $.each(obj.cars, function(key, value) {
            $("#dropDownCars").append("<option>" + value.carsName + "</option>");
        });
    });
});

$（文档）.ready（函数（）{
$.getJSON（“../cars.json”，函数（obj）{
美元每辆（obj.cars，功能（键，值）{
$（“#dropDownCars”）.append（“+value.carsName+”）；
});
});
});

非常感谢JFIDLE中的任何工作示例！谢谢。

请尝试此代码

var obj={
Cars: [
     {
      "CarType": "BMW",
      "carID": "bmw123"
      },
       {
      "CarType": "mercedes",
      "carID": "merc123"
       },
       {
      "CarType": "volvo",
      "carID": "vol123r"
        },
        {
      "CarType": "ford",
      "carID": "ford123"
        }
   ]
};

for(var i=0;i<obj.Cars.length;i++)
{
    var option=$('<option></option>').text(obj.Cars[i]['CarType']);
  $('select').append(option);

}

var obj={
汽车：[
{
“CarType”：“BMW”，
“carID”：“bmw123”
},
{
“CarType”：“mercedes”，
“carID”：“merc123”
},
{
“CarType”：“volvo”，
“carID”：“vol123r”
},
{
“CarType”：“ford”，
“carID”：“ford123”
}
]
};
对于（var i=0；i
试试这段代码。。。。
它解释了根据所选下拉id将代码放置在何处以选择图像

Html代码

 <select id="dropDownDest">
</select>



jQuery document.ready代码

 var a = {
            Cars: [{
                "CarType": "BMW",
                "carID": "bmw123"
            }, {
                "CarType": "mercedes",
                "carID": "merc123"
            }, {
                "CarType": "volvo",
                "carID": "vol123r"
            }, {
                "CarType": "ford",
                "carID": "ford123"
            }]
        };
        $.each(a.Cars, function (key, value) {
            $("#dropDownDest").append($('<option></option>').val(value.carID).html(value.CarType));
        });

        $('#dropDownDest').change(function () {
            alert($(this).val());
            //Code to select image based on selected car id
        });

var a={
汽车：[{
“CarType”：“BMW”，
“carID”：“bmw123”
}, {
“CarType”：“mercedes”，
“carID”：“merc123”
}, {
“CarType”：“volvo”，
“carID”：“vol123r”
}, {
“CarType”：“ford”，
“carID”：“ford123”
}]
};
$。每个（a.车辆、功能（键、值）{
$（“#dropDownDest”）.append（$（''）.val（value.carID.html（value.CarType））；
});
$（'#dropDownDest'）。更改（函数（）{
警报（$（this.val（））；
//根据所选车辆id选择图像的代码
});
fiddle或发布HTML也会有帮助。在选项中添加值属性，在下拉框中添加更改处理程序，该下拉框读取当前活动ID并相应设置图像的src。对于30个bug，我将完成您的工作；-）刚刚看到此注释，这也完成了工作。谢谢@iblue
 <select id="dropDownDest">
</select>

 var a = {
            Cars: [{
                "CarType": "BMW",
                "carID": "bmw123"
            }, {
                "CarType": "mercedes",
                "carID": "merc123"
            }, {
                "CarType": "volvo",
                "carID": "vol123r"
            }, {
                "CarType": "ford",
                "carID": "ford123"
            }]
        };
        $.each(a.Cars, function (key, value) {
            $("#dropDownDest").append($('<option></option>').val(value.carID).html(value.CarType));
        });

        $('#dropDownDest').change(function () {
            alert($(this).val());
            //Code to select image based on selected car id
        });