जेसन ऑब्जेक्ट

Question

के साथ पॉपुलटिंग ड्रॉप डाउन मैं एक जेसन ऑब्जेक्ट के साथ अपने ड्रॉप डाउन मेनू को पॉप्युलेट करने में कामयाब रहा हूं, जो ठीक काम करता है। वर्तमान में मैं एक छवि को प्रदर्शित करने की कोशिश कर रहा हूं जो ड्रॉप डाउन से चुने गए विकल्प के आधार पर एक छिपे हुए div में है। चूंकि ड्रॉप डाउन जेसन ऑब्जेक्ट द्वारा पॉप्युलेट किया गया है, मैं छवि डेटा को कैसे पुनर्प्राप्त करूंगा।

एचटीएमएल

<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 में कोई भी कामकाजी उदाहरण बहुत सराहना की जाएगी! धन्यवाद।

Answer 1

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

FIDDLE DEMO

Answer 2

Demo

इस कोड का प्रयास करें ..

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

} 

Answer 3

कोड के इस टुकड़े का प्रयास करें .... jsfiddle यह बताते हैं जहां डाल करने के लिए सेल करने के लिए कोड ect छवि आईडी

एचटीएमएल कोड

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