選擇元素上的占位符選項，默認選中

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>