Question

有点奇怪，不确定是否可行。

我正在使用的系统具有一个按选择排序的元素，该元素在加载时具有“推荐产品”作为选定选项，因为这是用户点击页面时他们希望产品出现的顺序，但是他们还希望它默认说“排序依据”，以便很明显这是一个按元素排序。不幸的是，我无法更改核心HTML，只能通过jQuery / Javascript进行修改。

只是想知道是否有一种使用jQuery的方法，因为到目前为止我尝试的方法已经干扰了默认选择。甚至可能有一个默认的占位符以及另一个选择来决定状态的负载吗？

干杯！

当前HTML

<select id="sort-by-select">
  <option value="#" selected="">Recommended Products</option>
  <option value="#">Price (High to Low)</option>
  <option value="#">Price (Low to High)</option>
  <option value="#">Newest In</option>
  <option value="#">Most Popular</option>
</select>

所需的HTML

<select id="sort-by-select">
  <option value="#" selected="" disabled="disabled">Sort By</option>
  <option value="#" selected="">Recommended Products</option>
  <option value="#">Price (High to Low)</option>
  <option value="#">Price (Low to High)</option>
  <option value="#">Newest In</option>
  <option value="#">Most Popular</option>
</select>

Answer 1

如评论中所指出的，您只能有一个默认/选定的选项。相反，您可以做的是使用.insertBefore()通过jQuery添加标签：

$(function() {
  var $label = $('<label>').text('Sort By:').attr('for', 'sort-by-select');
  $label.insertBefore($('#sort-by-select'));
});

label { margin-right: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
  <option value="#" selected="">Recommended Products</option>
  <option value="#">Price (High to Low)</option>
  <option value="#">Price (Low to High)</option>
  <option value="#">Newest In</option>
  <option value="#">Most Popular</option>
</select>

或者，您可以使用.text()在选择中的每个选项前添加“排序依据”：

$(function() {
  $('#sort-by-select option').text(function () {
    return 'Sort by: ' + $(this).text();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
  <option value="#" selected="">Recommended Products</option>
  <option value="#">Price (High to Low)</option>
  <option value="#">Price (Low to High)</option>
  <option value="#">Newest In</option>
  <option value="#">Most Popular</option>
</select>

选择元素上的占位符选项，默认选中

1 个答案: