Question

我的剃须刀视图中有一个@Html.DropDownList扩展名，该扩展名生成一个html下拉列表，排序选项并将附加 url（查询字符串）附加到每个选项。我想做的是更改它的CSS / HTML，以实现 navbar-link 样式而不是下拉样式。我对网站中的下拉列表的所有所有使用@html.dopdownlist扩展名。我不想更改扩展代码或创建另一个扩展。图片上的打击显示了我要执行的操作（将下拉样式更改为与第二行相同的导航栏样式）。

这是我的后端代码：

 @Html.DropDownList("products-orderby", 
 Model.AvailableSortOptions, new { onchange = "setLocation(this.value);" })

客户端代码：

 <select id="products-orderby" name="products-orderby" class="sortOptionsDropDown">
  <option selected="selected" value="15">New</option>
  <option value="10">Price : High to Low</option>
  <option value="11">Price : Low to High</option>
  <option value="5">Alphabetic</option>
</select>

对于我的目标来说，一个简单的html是打击，但是如果我想这样做，我必须编辑@ html.dopdownlist扩展名，我将其用于所有下拉菜单，或者必须创建另一个扩展名。

    <!-- my desired style -->
  <div id="products-orderby" name="products-orderby" class="sortOptionsDropDown">
   <a class="selected" >New</a>
   <a data-value="10">Price : High to Low</a>
   <a data-value="11">Price : Low to High</a>
   <a data-value="5">Alphabetic</a>
</div>

是否有任何jquery插件或JavaScript代码可将我的下拉菜单的样式更改为导航栏链接？（有一个名为jquery bar rating的简单插件，可将下拉菜单更改为评级栏）。
或者这是否有可能在客户端将下拉样式更改为我想要的样式？

这是jsfiddle，其中包含我当前的下拉样式以及我要实现的目标。

更新：使用Java脚本在前端更改代码会导致默认选择选项事件无法运行（更改事件下拉菜单）。来自我的控制器代码，该代码修改了我当前的页面网址并向其中添加了选定的排序选项：

     if (pagingFilteringModel.AllowProductSorting)
        {
            foreach (var option in activeOptions)
            {
                var currentPageUrl = _webHelper.GetThisPageUrl(true);
                var sortUrl = _webHelper.ModifyQueryString(currentPageUrl, "orderby=" + (option.Key).ToString(), null);

                var sortValue = ((ProductSortingEnum)option.Key).GetLocalizedEnum(_localizationService, _workContext);
                pagingFilteringModel.AvailableSortOptions.Add(new SelectListItem
                {
                    Text = sortValue,
                    Value = sortUrl,
                    Selected = option.Key == command.OrderBy
                });
            }
        }

Answer 1

您可以像下面在客户端上那样进行操作：

// Selecting your dropdown
var yourSelect = $('#products-orderby');

// Checking for existing
if (yourSelect != undefined) {

  // Creating div that includes a tags according to your dropdown
  var navBarDiv = $(document.createElement("div"))
    .addClass($(yourSelect).attr("class"))
    .attr("name", $(yourSelect).attr("name"))
    .attr("id", $(yourSelect).attr("id"));

  // Selecting dropdown options
  var options = yourSelect.find('option');

  // Creating a tags according to options
  $.each(options, function() {
    var link = $(document.createElement('a'))
      .attr("data-value", $(this).val())
      .text($(this).text());

    // Appending a tags to parent div
    navBarDiv.append(link);
  });

  $('#products-orderby').after(navBarDiv);
}

Online demo (jsFiddle)

修改

对于默认选择，您可以在下面添加代码：

// default select
if($(this).prop("selected"))
   link.addClass("selected");

Online demo (jsFiddle)

如何将默认下拉样式更改为导航栏链接，并且默认选择事件仍然有效？

1 个答案: