Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Select from a listbox- move selected item to another listbox

Posted on 2004-09-01
10
Medium Priority
?
243 Views
Last Modified: 2008-02-01
Hi,

Does anyone out there have any code, or can direct me to the following senario.

I would like 2 listboxes.

One shows a list of users who have no access rights. Another is a listbox of who does.

If I double click on one item in one list it should jump to the other and vice versa.

If I choose the > arrow it should move selected item from left listbox to right
If I choose the < arrow it should move the selected item from right listbox to left

If I choose the >> arrow it should move all users from left listbox to right
If I choose the << arrow it should move all the users from right to left.

Thanks and here's a picture just to be sure

---------------------------------------------          ---------------------------------------------
-      User A                                      -    >   -         User B                                    -
-      User C                                      -         -          User E                                   -
-      User D                                      -    <   -                                                      -
-      User F                                       -         -                                                      -
-                                                      -  >>   -                                                      -
-                                                      -         -                                                      -
-                                                      -  <<   -                                                      -
---------------------------------------------         -----------------------------------------------

0
Comment
Question by:avivak1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +2
10 Comments
 
LVL 33

Expert Comment

by:sajuks
ID: 11950700
// try this
<script language="JavaScript">

function dosubmit() {}

function deleteOption(object,index) {
object.options[index] = null;
}

function addOption(object,text,value) {
var defaultSelected = true;
var selected = true;
var optionName = new Option(text, value, defaultSelected, selected)
object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
if (fromObject.options[i].selected)
addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
if (fromObject.options[i].selected)
deleteOption(fromObject,i);
}
}

function copyAll(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
deleteOption(fromObject,i);
}
}
</script>

<html>

<head>
<title></title>
</head>

<body>

<form>
  <table>
    <tr>
      <td><select name="select1" multiple size="7">
        <option>User A </option>
        <option>User B</option>
        <option>User C</option>
        <option>User D </option>
        <option>User E</option>
        <option>User F</option>

      </select> </td>
      <td><input type="button" value=" &gt; "
      onClick="copySelected(this.form.select1,this.form.select2), dosubmit(select2)"> <p><input
      type="button" value=" &lt; "
      onClick="copySelected(this.form.select2,this.form.select1), dosubmit(select2)"> </p>
      <p><input type="button" value="&gt;&gt;"
      onClick="if (document.images) copyAll(this.form.select1,this.form.select2)"> </p>
      <p><input type="button" value="&lt;&lt;"
      onClick="if (document.images) copyAll(this.form.select2,this.form.select1)"> </td>
      <td><select name="select2" multiple size="7">
      </select> </td>
    </tr>
  </table>
</form>
</body>
</html>
0
 

Author Comment

by:avivak1
ID: 11951083
Perfect, except for one thing.

I would like to double click on any of the options and it will go to the opposite box.

Thanks,
Aviva
0
 
LVL 1

Accepted Solution

by:
Webby_ earned 400 total points
ID: 11951104
Here's a nice one: http://javascript.internet.com/miscellaneous/move-dual-list.html
And if you grab the onclick function call out of the > and < button youcan place it in an ondblclick event in the listboxes..
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 33

Assisted Solution

by:sajuks
sajuks earned 200 total points
ID: 11951167
// IE only
<script language="JavaScript">

function dosubmit() {}

function deleteOption(object,index) {
object.options[index] = null;
}

function addOption(object,text,value) {
var defaultSelected = true;
var selected = true;
var optionName = new Option(text, value, defaultSelected, selected)
object.options[object.length] = optionName;
}

function copySelected(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
if (fromObject.options[i].selected)
addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
if (fromObject.options[i].selected)
deleteOption(fromObject,i);
}
}

function copyAll(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
deleteOption(fromObject,i);
}
}
</script>

<html>

<head>
<title></title>
</head>

<body>

<form>
  <table>
    <tr>
      <td><select name="select1" onDblClick ="copySelected(this.form.select1,this.form.select2), dosubmit(select2)" multiple size="7">
        <option>User A </option>
        <option>User B</option>
        <option>User C</option>
        <option>User D </option>
        <option>User E</option>
        <option>User F</option>

      </select> </td>
      <td><input type="button" value=" &gt; "
      onClick="copySelected(this.form.select1,this.form.select2), dosubmit(select2)"> <p><input
      type="button" value=" &lt; "
      onClick="copySelected(this.form.select2,this.form.select1), dosubmit(select2)"> </p>
      <p><input type="button" value="&gt;&gt;"
      onClick="if (document.images) copyAll(this.form.select1,this.form.select2)"> </p>
      <p><input type="button" value="&lt;&lt;"
      onClick="if (document.images) copyAll(this.form.select2,this.form.select1)"> </td>
      <td><select name="select2" onDblClick ="copySelected(this.form.select2,this.form.select1), dosubmit(select2)" multiple size="7">
      </select> </td>
    </tr>
  </table>
</form>
</body>
</html>
0
 

Author Comment

by:avivak1
ID: 11952042
I have a weird senario. Maybe you can help?

The first time I choose the options and click submit - they get entered into a table - no problem.

If I go back to the page with the choices in the list box - with the list box populated with the data that was entered If I click submit - the Request.Form does not recognise the values that are in the list

Review:
I put in User A, User B and User F into the Access List - works
When I come back
User A, B, and F are in the Access List Box

When I click submit Request.Form("Select2") has no data inside. (Using ASP etc)
0
 
LVL 19

Assisted Solution

by:dakyd
dakyd earned 100 total points
ID: 11953016
I think that's because your options have no values.  The script that sajuks gave you copies both text and values over to the Access List, but you don't give your options values so you copy over blank strings as values.  Try changing these lines:
<select name="select1" onDblClick ="copySelected(this.form.select1,this.form.select2), dosubmit(select2)" multiple size="7">
        <option>User A </option>
        <option>User B</option>
        <option>User C</option>
        <option>User D </option>
        <option>User E</option>
        <option>User F</option>
</select>

to the following:
<select name="select1" onDblClick ="copySelected(this.form.select1,this.form.select2), dosubmit(select2)" multiple size="7">
        <option value="A">User A </option>
        <option value="B">User B</option>
        <option value="C">User C</option>
        <option value="D">User D </option>
        <option value="E">User E</option>
        <option value="F">User F</option>
</select>

Hope that helps.
0
 

Author Comment

by:avivak1
ID: 11953094
No that doesn't fix the issue. (but thanks!)

Also. There is no order so everything jumps all over the place depending on the different clicks
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11953985
Hm, it's hard to tell without the source, but I'm guessing that when you're populating Select2 from your table/db, you're not assigning values to the options.  A quick way to check would be to put A, B, and F into the Access List and submit.  Return to the page, and then View Source on your browser.  The options in Select2 should all have an attribute that says "value=SOMETHING" - if they don't, then either the ASP isn't populating the fields correctly, or the values aren't being stored into the table in the first place (maybe even both).  Let me know if that doesn't make sense, and I'll try to explain.  Hope that helps.
0
 
LVL 1

Assisted Solution

by:mcouillard
mcouillard earned 100 total points
ID: 11965949
This is the one I always use:

http://www.mattkruse.com/javascript/selectbox/

The second from the top example seems the closest match.
0
 

Author Comment

by:avivak1
ID: 11969212
Thanks for all your help

Webby's answer was closest and of course mcouillard it's nice to see other options
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

660 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question