如何让一个下载框与css类一起工作？

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);

in Views语法必须如下所示

<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：

＆＃13;

＆＃13;

$(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:
      }
    }
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Fiddle