Take the 2-minute tour ×

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.

share|improve this question
I'm guessing that data-bind tag is from Knockout? You don't have a tag for it, but that's where its pulling the options from. Do you want the solution in Razor, or Knockout? Using razor will require you to remove the knockout binding. –  Tyrsius Nov 12 '12 at 19:02
add comment

1 Answer

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>

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.

share|improve this answer
Thank you, I entirely forgot to follow up on this. Yes you where correct, it was using Knockout. I was not aware of knockout's existence so it was a huge help to understand the code. –  barnonline Jun 18 '13 at 6:22
add comment

Your Answer


