如何按 <option> 值对 <li> 进行排序？答案

【问题标题】：How do I sort <li> by <option> value?如何按 <option> 值对 <li> 进行排序？
【发布时间】：2015-01-16 11:05:11
【问题描述】：

我正在尝试按 select 标记中的选项分配的值对 ul 进行排序。

<ul style="list-style-type: none;">

  <li>MCF3M0 - Functions and Applications</li>
  <select value="MCF3M0">
    <option value="1">1 Star</option>
    <option value="2">2 Stars</option>
    <option value="3">3 Stars</option>
    <option value="4">4 Stars</option>
    <option value="5">5 Stars</option>
  </select>
  <li>BDI3C0 - Entrepreneurship: The Venture</li>
  <select value="BDI3C0">
    <option value="1">1 Star</option>
    <option value="2">2 Stars</option>
    <option value="3">3 Stars</option>
    <option value="4">4 Stars</option>
    <option value="5">5 Stars</option>
  </select>
  <li>FSF3U0 - Core French</li>
  <select value="FSF3U0">
    <option value="1">1 Star</option>
    <option value="2">2 Stars</option>
    <option value="3">3 Stars</option>
    <option value="4">4 Stars</option>
    <option value="5">5 Stars</option>
  </select>
  <li>SPH3U0 - Physics</li>
  <select value="SPH3U0">
    <option value="1">1 Star</option>
    <option value="2">2 Stars</option>
    <option value="3">3 Stars</option>
    <option value="4">4 Stars</option>
    <option value="5">5 Stars</option>
  </select>
</ul>
<button type="submit">Submit Ratings</button>

我正在尝试按用户指定的评分对这些课程进行排序。非常感谢一个有助于排序和显示排名课程的新列表的 javascript 函数。

【问题讨论】：

那是无效的html
你想按什么排序？...
所以把所有的 1 星放在 select 中，把所有的 2 星放在 select..etc 中。是这个意思吗？
我正在尝试排序：MCF3M0 - 功能和应用以及其他 3 门课程按“评级”
听起来一个选择框会定位一个 div，其中包含另一个选择框。

标签： javascript html sorting html-lists selection

【解决方案1】：

首先：当您发布 HTML 时，它是无效的。 <ul> 应该只有 <li> 作为直接子代，而不是 <select>。您可能应该将<select> 移动到<li> 标签内。

如果您希望 javascript 函数在下拉列表更改值时更改这些项目的顺序，您需要将一个事件处理程序 (onchange) 附加到每个 <select>，其中处理程序回调将收集当前每个值，然后按这些值对相应的<li> 进行排序。像 jquery 这样的库会执行以下操作：

$('ul').on('change', 'select', function () { doSort(); });

从那里，您只需要获取doSort 即可根据列表项内<select> 的值对列表的子项进行排序。

【讨论】：