如何让下拉框与 css class 一起使用？

Question

我在控制器中有一个 SelectList，它的值通过 ViewData 传递给视图，如下所示：

List<string> available = new List<string>();
            available.AddRange(product.AvailableSizes.Split(',').ToList());
            ViewData["availablesize"] = new SelectList(available);

在视图中我有一个下拉框显示变量 availablesize 的值，如下所示：

@Html.DropDownList("availablesize")

出于某些原因，我需要以下列格式显示此下拉框，但无法处理此问题，有什么建议吗？

<div class="product-page-options">
<div class="pull-left">
<label class="control-label">Size:</label>
<select class="form-control input-sm">
 <option>L</option>
 <option>M</option>
 <option>XL</option>
</select>
</div>
</div>

Answer 1

此代码必须有效，您也可以在 razor 语法中提供 css 属性。

还要确保您的 ViewData["availablesize"] 有 IEnumerable<SelectListItem>

将您的控制器代码更改为以下内容

ViewData["availablesize"] = new SelectList((IEnumerable)available);

在视图中语法必须如下所示

<div class="product-page-options">
 <div class="pull-left">
 <label class="control-label">Size:</label>      
    @Html.DropDownList("availablesize", ViewData["availablesize"], new {@class = "form-control input-sm "})
 </div>
</div>

这是您需要的语法

Answer 2

如果您想根据传递的值对每个选项设置不同的样式，您可以为此使用一些 JQuery：

$(document).ready(function() {
  $("#availablesize option").each(function() {
    if ($(this).val() != '') {
      switch ($(this).val()) {
       case 'S':
         $(this).css('background-color', 'lightgreen');
          break;
        case 'M':
         $(this).css('background-color', 'green');
          break;
        case 'L':
         $(this).css('background-color', 'orange');
          break;
        case 'XL':
         $(this).css('background-color', 'red');
          break;
        default:
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="availablesize">
  <option value="">- select size -</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
</select>

Fiddle

如何让下拉框与 css class 一起使用？

How can i get a dropdownbox working with a css class?

css

asp.net-mvc

selectlist

drop-down-menu