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

Question

我的 razor View 中有一个 @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 脚本更改前端代码导致默认选择选项事件未运行(更改事件下拉)。它来 self 的 Controller 代码，它修改了我当前的页面 url 并向其添加了选定的排序选项:

     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)