Javascript 排序<；部门>；使用jQuery的元素

我的网站上有如下HTML：

<div class="groups">
  <div class="group">
    Group 1 priority:
    <select>
      <option value="1.0">1</option>
      <option value="2.0" selected="selected">2</option>
      <option value="3.0">3</option>
    </select>
  </div>
  <div class="group">
    Group 2 priority:
    <select>
      <option value="1.0">1</option>
      <option value="2.0">2</option>
      <option value="3.0" selected="selected">3</option>
    </select>
  </div>
  <div class="group">
    Group 3 priority:
    <select>
      <option value="1.0" selected="selected">1</option>
      <option value="2.0">2</option>
      <option value="3.0">3</option>
    </select>
  </div>
</div>

第一组优先事项：
1.
2.
3.
第2组优先事项：
1.
2.
3.
第3组优先事项：
1.
2.
3.

我正在寻找一种方法，根据下拉列表中选择的内容，使用jQuery对这些组在浏览器中的显示顺序进行排序。当用户在任何下拉列表或页面加载中选择新值时，应使用此选项

解决这个问题最简单的方法是什么

如果可以以任何方式使用可排序的东西，我有jqueryui可用。我找不到使用它的方法

---

更新：中的其他数据应在下拉列表之后移动到任何位置。组的数量从0到20不等。

编辑：以下是一些代码，可以完成您需要的操作。这里的

select_1

，

select_2

等应该是下拉列表的ID

getDropdown（）

应该是一个函数，使用您选择的方法（

document.getElementById（）.options.selectedIndex、

、jquery等）返回给定下拉ID的选定值

…内容
…内容
…内容
…内容
…内容
…内容

---

函数sortValues（）
{
/*将每个div的内容保存在数组中
因此，它们可以循环通过
稍后重新插入*/
var content=[$（“#child1”）.html（），$（“#child2”）.html，$（“#child3”）.html（）；
//获取所有下拉列表的值并对其进行排序
var sortedArray=[getDropdown（“选择_3”）、getDropdown（“选择_2”）、getDropdown（“选择_3”）]；
var sortedContent=新数组（）；
sortedArray.sort（）；
/*循环遍历所有已排序的值，
比较每个下拉列表的值
根据排序后的值，使用
决定部门的新安排
*/
对于（x=0；x对于（y=0；y div中还有其他数据，这些数据必须与下拉列表中设置的值一起使用。同样的array.sort方法可以工作，将每个div的内容加载到一个数组中，清空父div，使用array.sort按字母顺序对div进行排序，并使用新的顺序将它们重新附加到父div中。Jquery将使这一切变得简单。btw，它是什么类型的内容div还包含图像、输入字段和其他内容。您似乎忽略了一个事实，即组的数量未知。除此之外，该方法似乎可以工作。您需要在变量num_groups中的某个位置回显组的数量。然后在设置sortedArr时可以从1-num\u组循环，对于内容，0-（num\u组）。在这之后应该可以正常工作
<div id="parent">
    <div id="child1">
        ..content
        <select id="select_1">...content</select>
    </div>

    <div id="child2">
        ..content
        <select id="select_2">...content</select>
    </div>

    <div id="child3">
        ..content
        <select id="select_3">...content</select>
    </div>
</div>

 function sortValues()
    {
        /*Save the contents of each div in an array 
          so they can be looped through and 
          re inserted later*/
        var content=[$("#child1").html(),$("#child2").html,$("#child3").html()];

        //Get the value of all dropdowns and sort them
        var sortedArray=[getDropdown("select_3"),getDropdown("select_2"),getDropdown("select_3")];
        var sortedContent=new Array();
        sortedArray.sort();

        /*Loop through all the sorted values, 
         compare the value of each dropdown
         against the sorted value and use that 
         to determine the new arrangement of the divs
         */
        for (x=0; x< sortedArray.length; x++)
        {
            for (y=0; y<=content.length; y++)
            {
                if (getDropdown("dropdown_" + (y+1))==sortedArray[x])
                {
                    sortedContent[x]=content[x];
                               //This will prevent the same div from being assigned again:
                    $("#select_" + (y+1)).remove(); 
                    break;
                }

            }

        }
        /* Empty the parent div so new divs can be inserted.
           You can also do a fadeout/fadeIn of the div here
         */


        $("#parent").empty();       

        for (x=0; x< sortedContent.length; x++)
        {
            $("#parent").append(sortedContent[x]);
        }
    }