Question

我尝试按照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函数，它将帮助排序和显示排名课程的新列表。

Answer 1

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

如果你想让一个javascript函数在下拉列表更改值时改变这些项的顺序，你需要将事件处理程序（onchange）附加到每个<select>，其中处理程序回调将收集每个值的当前值，然后按这些值对相应的<li>进行排序。像jquery这样的库会做类似的事情：

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

从那里开始，您只需要doSort根据列表项中<select>的值对列表中的子项进行排序。

如何按<option>值排序<li>？</option> </li>

1 个答案: