Hello, Basically, I have a select which is being filled in dynamically. I would like the user to be able to sort this list as he wants (using drag and drop)... but I don't have a clue how to do it. I have been told that I can use "scriptaculous" but I cannot manage to make it work with select. The thing is that I cannot use it with a <ul> list since I need to be able to select an item by clicking on it. Could you please help me? I have simplified the code... <<html> <head> <script language=JavaScript> function getSelect(s) { alert("selectedOptionText="+s.options[s.selectedIndex].text); } </script> <body> <form onSubmit="return false" method="post" name="myForm" action=""> <table border="2"> <tbody> <tr><th>Services</th></tr> <tr> <td><select name="service_list" size=5 style="width:150px" onClick="getSelect(this)"> <option value="something1">S1</option> <option value="something2">S2</option> </select> </td></tr> </tbody> </table> </form> </body> </html> Code (markup):
I don't think that select option can be dragged. I think you will have to use the <ul> element and write JavaScript code for selecting the element. And on submitting the form, the selected elements should be stored to an hidden input.
What do you mean with the hidden elements? If I cannot use a select list, I could use a <ul> list.... I know how to drag and drop with a list.... but I don't know how to select an element clicked on : In addition, do you know how to add/delete a element within a ul list in Javascript? .... onClick=getSelect(this) .... function getSelect(this) { selectedOptionText=..... selectedOptionValue=.... } Code (markup): Could you help me with that? I would like to do something like: <ul> <li value="20" onClick=getSelect(this)>value20</li> <li value=·30" onClick=getSelect(this)>value30</li> </ul> Code (markup):
I am not very experienced with Javascript. Could you give me the code I should write in order to memorize the selected item. In addition, I need to be able to add/delete with Javascript an element of a ul list. COuld you tell me how to do it? Thanks
I haven't tried but I think you can do with script.aculo.us using Sortable.create function and using "tag" option to change from "li" elements to "option" elements. More info here: http://wiki.script.aculo.us/scriptaculous/show/Sortable.create Demo with "li" elements here: http://wiki.script.aculo.us/scriptaculous/page/print/GhostlySortableDemo
THanks for your answer... the problem is that I also need to be able to click on the item in order to delete it for instance. I have tried several things but it does not work. Do you know how to add a new value and to delete a value. The value to be added is (value, text). It is taken from a select list. the li class should receive the value and the text should be shown.... but I don't know how to do it Could you help on that first? Thanks
You can do it with AJAX (asynchronous Javascript + XML), but maybe is something difficult if you're not very experienced with Javascript. You need to know XML, and DOM and maybe XSLT (if you want to make transformations on client).