Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
13
rated 0 times [  19] [ 6]  / answers: 1 / hits: 19881  / 16 Years ago, mon, february 16, 2009, 12:00:00

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.


More From » jquery

 Answers
0

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]);
}
}

[#99973] , 56 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ammonderekm

Total Points: 247
Total Questions: 105
Total Answers: 98

Location: Tuvalu
Member since Sat, Feb 11, 2023
1 Year ago
ammonderekm questions
Tue, May 24, 22, 00:00, 2 Years ago
Wed, Mar 11, 20, 00:00, 4 Years ago
Thu, Dec 19, 19, 00:00, 4 Years ago
Thu, Oct 24, 19, 00:00, 5 Years ago
;