Styling of selectlist items in mvc3

Question

I'm in the process of altering some code that I didn't wrote, AND I'm rather new to Razor

It is a select list of vehicles and the code looks like this:

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

My datasource contains besides Vehicleid and Vehiclenumber also a Vehicletype, and now I want to highlight the vehicles according to type, so the gasoline vehicles is blue and the diesel ones are green.

But I have no idea of how to go about this, any help is very appreciated.

Answer 1

So, your question code has a knockout data-binding for the options in it, so I am going to assume for now that you are using Knockout as the datasource. To do this, you will have to expand the binding a little, so that you can place a css-class on each option individually.

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

Now, this depends on the structure of your knockout viewmodel, but here is the fiddle I made using this method. You should be able to adapt it to fit yours. If you want a Razor-only solution, let me know.