Question

所以我有一种按字母顺序排列下拉列表：

$(".product-actions select").each(function() {   
// Sort all the options by text. I could easily sort these by val.
$(this).html($("option", $(this)).sort(function(a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));

}）;

product-class元素可以包含两种类型的下拉列表。一个显示颜色，一个显示尺寸。这种颜色非常适用于颜色。然而，在尺寸上我没有考虑衣服尺寸和鞋子尺寸。按字母排序的鞋子尺寸很大，但是对于衣服我希望它从最小尺寸到最大尺寸显示，这就成了一个问题。

以下是尺寸下拉列表的显示方式：

鞋

<select class="size" data-option-key="size" data-priority="0">
  <option value="color" selected="selected">size</option>
  <option value="05"><span>05 - $198.00</span></option>
  <option value="06"><span>06 - $198.00</span></option><option value="06.5">
</select>

服装（尺码范围从XS，S，M，L，XL）

<select class="size" data-option-key="size" data-priority="0">
  <option value="color" selected="selected">size</option>
  <option value="L(14-16)"><span>L(14-16) - $158.00</span></option>
  <option value="M(10-12)"><span>M(10-12) - $158.00</span></option>
  <option value="S(6-8)"><span>S(6-8) - $158.00</span></option>
  <option value="XL(18)"><span>XL(18) - $158.00</span></option>
  <option value="XS(2-4)"><span>XS(2-4) - $158.00</span></option>
</select>

我正试图弄清楚如何以不同的方式解决这两个问题。谁能给我一些关于如何处理这种排序的建议？

**注意 - 在鞋子下拉列表中，在尺寸之后添加了该价格。

谢谢！

Answer 1

您可以使用JSON对象并将其用于比较功能。这很简单：

var shirtSizes = { "XS" : "0", "S" : "1", "M" : "2", "L" : "3", "XL" : "4"}

然后在查找对象中的值时使用比较函数。

return shirtSizes[a.text] == shirtSizes[b.text] ? 0 : shirtSizes[a.text] < shirtSizes[b.text] ? -1 : 1

根据内容排序下拉列表

1 个答案: