Styling przedmiotów selectList w mvc3

Question

jestem w trakcie zmieniania kodu, że nie napisał, a ja jestem raczej nowy do Razor

Jest to lista wyboru pojazdów i kod wygląda to:

<select name="selectVehicle" class="cls_vehicles" data-bind="options:  $root.vehicles,optionsCaption:$root.noVehicleText, optionsText:  'VehicleNumber',optionsValue: 'VehicleID',value: VehicleID"><option value=""/></select> 

Moje źródła danych zawiera oprócz Vehicleid i Vehiclenumber również vehicleType, a teraz chcę podkreślić pojazdów według typu, więc pojazdy benzyna jest niebieski, a te wysokoprężne są zielone.

Ale nie mam pojęcia, jak to zrobić, każda pomoc jest bardzo doceniana.

Answer 1

Twój kod zapytania zawiera wiązanie danych dla opcji w nim zawartych, więc zakładam, że używasz Knockout jako źródła danych. Aby to zrobić, będziesz musiał nieco rozszerzyć powiązanie, dzięki czemu możesz umieścić klasę css dla każdej opcji indywidualnie.

<select data-bind="value: selectedCar, foreach: cars"> 
    <option data-bind="css: { carDiesel: isDiesel, carGas: isGas }, text: name"></option> 
</select>​ 

Teraz zależy to od struktury pucharowej viewmodel, ale here is the fiddle zrobiłem przy użyciu tej metody. Powinieneś być w stanie dostosować go do swojego. Jeśli potrzebujesz rozwiązania tylko dla maszynki Razor, daj mi znać.