14

ドロップダウン メニューに 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>

JSON ファイル

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

これは、jquery を使用してドロップダウン メニューを設定する方法です。

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

jfiddleの実際の例は、非常に高く評価されます! ありがとう。

4

3 に答える 3

17

このコードを試してください.... jsfiddle 選択したドロップダウン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
        });
于 2013-08-28T10:13:46.400 に答える
8 
$('#dropDownDest').on('change', function() {
    if ($(this).val() == 'vol123r') {
        $('#imghide').removeClass('hide');
    } else {
        $('#imghide').addClass('hide');
    }
});

フィドルのデモ

于 2013-08-28T10:12:19.667 に答える
3

デモ

このコードを試してください..

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);

}
于 2013-08-28T10:06:33.267 に答える