使用json對象填充下拉列表

我已經設法使用json對象填充我的下拉菜單，該json對象工作正常。目前我正試圖根據從下拉菜單中選擇的一個選項顯示一個隱藏的div的圖像。由於下拉列表由json對象填充，我將如何檢索圖像數據。使用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中的任何工作示例，將非常感謝！謝謝。

來源

2013-08-28 user2721700

小提琴或發佈您的HTML將是有益的，以及ECT圖像。 – rgin

將值屬性添加到下拉框的選項和更改處理程序中，該選項卡讀取當前活動的ID並相應地設置圖像的src。對於30個錯誤我會做你的工作;-) – schlingel

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

FIDDLE DEMO

來源

2013-08-28 10:12:19

這工作像一種享受，非常感謝您的幫助。 – user2721700

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

}

來源

2013-08-28 10:06:33

嘗試這段代碼.... 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-28 10:13:46 iJade

剛剛看到這個評論，這也是工作。 Thankyou @iblue – user2721700

使用json對象填充下拉列表

回答

相關問題