How to distinct classes in CSS using Javascript

Question

I use jQuery for two DropdownList elements in MVC. But both classes are equally named "chzn-select". When I try to add values there are some conflicts.

Can anybody tell me how to distinguish the "chzn-select" elements?

<tr>
    <td>@Html.Label("branch")
    </td>
    <td>
        @Html.DropDownListFor(m => m.RegionId, (SelectList)ViewBag.Regions, new {@class="chzn-select" ,multiple ="true",data_placeholder = "choose branch", style = "Width:200px", onChange = "regionDropDownChanged();" , tabindex = 3   })
        @Html.ValidationMessageFor(m => m.RegionId)
    </td>
</tr>
<tr>
    <td>@Html.Label("organization")
    </td>
    <td>
        @Html.DropDownListFor(m => m.EnterpriseId, (SelectList)ViewBag.Enterprises, new {@class="chzn-select" ,multiple ="true",data_placeholder = "choose organization", style = "Width:200px", tabindex = 3 })
        @Html.ValidationMessageFor(m => m.EnterpriseId)
    </td>
    <td>
    </td>
</tr>

Answer 1

You can also add custom attribute like isstyleadded=true, which will allow you to make choice.

Answer 2

You can add an ID or add a new class like this @class="chzn-select-branch chzn-select".

So chzn-select is use to style to dropdonw and chzn-select-branch to add items with jQuery

Answer 3

I agree with @alecasciaro. I've noticed I've been mostly adding a class name to help with selectors. Comes in handy when dealing with specific groups of elements.

I tried to vote for that answer but I guess I don't yet have enough reputation points to do anything but Ask or Answer.