views:

6298

answers:

1

I have HTML like the following on my website:

<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>

I am looking for a way to sort the order these groups appear in the browser using jQuery, based on the what is selected in the dropdown. It should resort when the user selects a new value in any of the dropdowns, or on page load.

What would be the easiest approach to this problem?

I have jQuery UI available, if the sortable thing can be used in any way. I couldn't not find a way to use that.

Update: There is other data in the <div class="group"> that should follow the dropdowns wherever they are moved. The number of groups varies from 0 to 20.

+2  A: 

Edit: Here is some code which should do what you're after. Here select_1, select_2, etc should be the IDs of the dropdowns. getDropdown() should be a function that returns the selected value of the given dropdown ID using your choice of method (document.getElementById().options.selectedIndex,, jquery, etc)

<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]);
        }
    }
Click Upvote
There is other data in the divs, and that data has to accompany the values set in the dropdowns.
Vegard Larsen
the same array.sort approach would work, load the content of each div in an array, empty the parent div, use array.sort to sort the divs in alphabetical order and re-append them in the parent div using new order. Jquery will make all this easy. btw, what sort of content is it
Click Upvote
The divs also contain images, input fields and other stuff.
Vegard Larsen
See the new code and tell me if it helps
Click Upvote
You seem to have neglected the fact that there is an unknown number of groups. Other than that, it seems that the approach could work.
Vegard Larsen
You'll need to echo out the number of groups somewhere in a variable like num_groups. Then when setting up the sortedArray array you can loop from 1-num_groups and for content, 0-(num_groups). Should work fine after that
Click Upvote