用json对象填充下拉 [英] Populating drop down with json object

问题描述

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

I have managed to populate my drop down menu with a json object, which worked fine. Currently I am trying to display an image which is in a hidden div based on an option selected from the drop down. As the drop down is populated by the json object how would I retrieve the image data.

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>

JSON文件

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

这是我如何使用jquery填充下拉菜单。

This is how I populate the dropdown menu using jquery.

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

jfiddle中的任何工作示例，将非常感谢！谢谢。

Any working example in jfiddle, would be very much appreciated! Thanks.

推荐答案

$('#dropDownDest').on('change', function() {
    if ($(this).val() == 'vol123r') {
        $('#imghide').removeClass('hide');
    } else {
        $('#imghide').addClass('hide');
    }
});

FIDDLE DEMO

FIDDLE DEMO

这篇关于用json对象填充下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！