Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Codewalkers Forums > Other Technologies > Client Side Things
Reload this Page

Dynamic multi selection box

Discuss Dynamic multi selection box in the Client Side Things forum on Codewalkers.
Dynamic multi selection box Here is a place to talk and ask questions about HTML, CSS, Javascript, and other client side technologies.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
  #1  
Old May 28th, 2003, 06:11 AM
mathewvp mathewvp is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Posts: 143 mathewvp User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
Dynamic multi selection box
Hi,

I have a combo box which contains a no of values.On selecting any of these values and clicking a button,the selected value should get added to a multi select list(dynamically).And on selecting any value from the multi selection list and clicking another button ,the selected value should get removed from the multi selection list.Can anybody help.
Reply With Quote
  #2  
Old May 28th, 2003, 07:23 AM
crisp crisp is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Holland
Posts: 336 crisp User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: Dynamic multi selection box
quick example

php Code:
Original - php Code 
  1.  
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5.  
  6. function swapOptions(el_from, el_to) {
  7.  
  8.   var tempArray = [];
  9.  
  10.   // remove options from el_from and add to tempArray
  11.   var i = 0;
  12.   while (i < el_from.options.length) {
  13.  
  14.     if (el_from.options[i].selected) {
  15.  
  16.       tempArray[tempArray.length] = [el_from.options[i].text, el_from.options[i].value];
  17.       el_from.options[i] = null;
  18.  
  19.     } else {
  20.  
  21.       i++;
  22.  
  23.     }
  24.  
  25.   }
  26.  
  27.   // add options from el_to to tempArray
  28.   for (i = 0; i < el_to.options.length; i++) {
  29.  
  30.     tempArray[tempArray.length] = [el_to.options[i].text, el_to.options[i].value];
  31.  
  32.   }
  33.  
  34.   // sort the tempArray
  35.   tempArray.sort(function(a,b) { return (a[0] == b[0])? 0 : (a[0] > b[0])? 1 : -1; });
  36.  
  37.   // clear el_to and refill with items in tempArray
  38.   el_to.options.length = 0;
  39.   for (i = 0; i < tempArray.length; i++) {
  40.  
  41.     el_to.options[i] = new Option(tempArray[i][0], tempArray[i][1]);
  42.  
  43.   }
  44.  
  45. }
  46.  
  47. </script>
  48. </head>
  49. <body>
  50. <form name="myform">
  51. <select name="sel_from" style="width: 120px" multiple="multiple" size="10">
  52.   <option value="Anouk">Anouk</option>
  53.   <option value="Ed">Ed</option>
  54.   <option value="Eric">Eric</option>
  55.   <option value="Jan">Jan</option>
  56.   <option value="John">John</option>
  57.   <option value="Marieke">Marieke</option>
  58.   <option value="Martin">Martin</option>
  59.   <option value="Masja">Masja</option>
  60.   <option value="Peter">Peter</option>
  61.   <option value="Tino">Tino</option>
  62. </select>
  63. <input type="button" value="<<" style="width: 30px;" onclick="swapOptions(this.form.sel_to, this.form.sel_from)" />
  64. <input type="button" value=">>" style="width: 30px;" onclick="swapOptions(this.form.sel_from, this.form.sel_to)" />
  65. <select name="sel_to" style="width: 120px" multiple="multiple" size="10">
  66. </select>
  67. </form>
  68. </body>
  69. </html>


(put it in PHP tags for layout)
Reply With Quote
  #3  
Old May 28th, 2003, 08:51 AM
mathewvp mathewvp is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Posts: 143 mathewvp User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
Thanks Crisp
Your code helped.Thanks Crisp.You are always there when we need help.
Reply With Quote
  #4  
Old February 16th, 2004, 02:11 AM
Anonymous Anonymous is offline
Registered User
Codewalkers God 35th Plane (22000 - 22499 posts)
  
Join Date: Apr 2007
Posts: 22,309 Anonymous User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 24
RE: Dynamic multi selection box
Hi,

Nice coding!
By the way, would you please to tell me how to get(or by "POST") those multi-selected variables out? I always get the last selected item out but not the whole list! :<

I added this....
<form action="READ.php" method="post" name="myform">

and a "SUBMIT" button....
<input type="submit" name="Submit" value="Submit">

Thanks!
Arnold
Reply With Quote
  #5  
Old February 16th, 2004, 02:23 AM
mathewvp mathewvp is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Posts: 143 mathewvp User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: Dynamic multi selection box
With multi selection list,you only get the selected values on submitting the form.SO before submitting,you need to select all the values in the select box.An examples is

Code:
function subform()
{
forr(i=0;i<document.form1.elements['to_players[]'].options.length;i++)
 {
               document.form1.elements['to_players[]'].options[i].selected=true;
            }  
            document.form1.submit();
}
}
Reply With Quote
  #6  
Old February 16th, 2004, 02:29 AM
CodeKadiya CodeKadiya is offline
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: Colombo,Sri Lanka
Posts: 2,313 CodeKadiya User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 4
Send a message via Yahoo to CodeKadiya
RE: RE: Dynamic multi selection box

Quote:
I always get the last selected item out but not the whole list!

eg :
php Code:
Original - php Code 
  1.  
  2. <?
  3. if($_POST['submit'])
  4. {
  5.     echo "No. of selected items : ".count($_POST['list']);
  6.     foreach($_POST['list'] as $value)
  7.         echo "<li>".$value;
  8. }
  9. ?>
  10. <form action="<?=$_SERVER['PHP_SELF']?>" method=post>
  11. <select size=10 multiple name=list[]>
  12. <option value="Option1">Option1</option>
  13. <option value="Option2">Option2</option>
  14. <option value="Option3">Option3</option>
  15. <option value="Option4">Option4</option>
  16. <option value="Option5">Option5</option>
  17. </select>
  18. <input type=submit name="submit"></form>
Reply With Quote
  #7  
Old February 16th, 2004, 08:19 AM
Anonymous Anonymous is offline
Registered User
Codewalkers God 35th Plane (22000 - 22499 posts)
  
Join Date: Apr 2007
Posts: 22,309 Anonymous User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 24
RE: Dynamic multi selection box
Hi,

Thanks!

Actually I am doing a dynamic multi-selection box...
I can display those selected items in a alert-box(i.e. in JavaScript)...so how can I pass these JS's variable to outside the HTML? I have tried to use Hidden-variable ... <input type="hidden" name=output_list" value=strSel>.... but failed :<

Please give me a hand!!! Thanks in advance!
Arnold


=======HTML Listing (if you have time, please try it! :> )======
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<script>
<!--
items = ['CnEg','CiEgenEg','CoS','EEamp; Erig','Egt/ogt','MBue'];
var checkboxAct = 0;

function listAct() {
for (var i = document.form1.bclass.options.length; i >= 0; i--){
document.form1.bclass.options[i] = null;
}
for (var i = document.form1.cclass.options.length; i >= 0; i--){
document.form1.cclass.options[i] = null;
}
if(checkboxAct==0){
document.form1.bclass.options[document.form1.bclass.options.length]
= new Option('[no Program selected]','0');
document.form1.cclass.options[document.form1.cclass.options.length]
= new Option('[no Program selected]','0');
}
for (x=0; x<items.length; x++) {
action = checkboxAct & poten(x);
if (action != 0) {
if(x==0){
document.form1.bclass.options[document.form1.bclass.options.length]
= new Option('1-C Eg');
document.form1.bclass.options[document.form1.bclass.options.length]
= new Option('2-C & en Eg');
document.form1.bclass.options[document.form1.bclass.options.length]
= new Option('3-C & en Eg');
document.form1.bclass.options[document.form1.bclass.options.length]
= new Option('4-C & en Eg');
document.form1.cclass.options[document.form1.cclass.options.length]
= new Option('A-dfsdfgf');
document.form1.cclass.options[document.form1.cclass.options.length]
= new Option('B-sdewfd');
document.form1.cclass.options[document.form1.cclass.options.length]
= new Option('C-sdf djkf 23f');
document.form1.cclass.options[document.form1.cclass.options.length]
= new Option('D-213dsf');
}
}
}
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="adb.php">
<table width="100%" border="0">
<!--DWLayoutTable-->
<tr>
<td colspan="19" valign="top"><strong>Type:</strong></td>
</tr>
<tr valign="middle">
<td width="326" height="34"><input name="checkbox9" type="checkbox" onClick="actionVar(poten(0));listAct()">
CE</td>
<td colspan="15"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr valign="middle">
<td height="18"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td colspan="15"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td height="34" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td colspan="15" valign="middle"><!--DWLayoutEmptyCell-->&nbsp;</td>
</tr>
<tr>
<td colspan="19" valign="top"><strong>Level:</strong></td>
</tr>
<tr>
<td colspan="19" valign="top">Class1
<select name="bclass" size="3" multiple id="bclass">
<option>[no Program selected]
</select>
<em><font color="#FF0000" size="2">(can pick more than one selection)</font> </em></td></tr>
<tr>
<td colspan="19" valign="top">Class2</td>
</tr>
<tr>
<td colspan="19" valign="top"><select name="cclass" size="3" multiple>
<option>[no Program selected]</option>
</select>
<em> <font color="#FF0000" size="2">(can pick more than one selection)</font> </em></td>
</tr>

<hr>

</table>
<hr>
<p align="center"> <input name="Submit" type="submit" id="Submit" value=" Submit ">
<input type="reset" name="Submit2" value="Reset Form">
<input name="Submit3" type="button" id="Submit32" value="Cancel">
<INPUT name="BUTTON" TYPE=BUTTON
ONCLICK="outputSelected(this.form.bclass.options),outputSel ected(this.form.cclass.options)" VALUE="Selected List Items">
</p>
<script>
function actionVar (numero) {
checkboxAct ^= numero;
}
function poten ( exponente ) {
calculo = 1;
for (x=0;x<exponente;x++) {
calculo = calculo*2;
}
return calculo;
}
function displayOpt() {
for (x=0; x<items.length; x++) {
document.write("<input type='checkbox' onClick='actionVar(" + poten(x) + ");'>" + items[x] + "<br>");
}
}
function getSelected(opt) {
var selected = new Array();
var index = 0;
for (var intLoop = 0; intLoop < opt.length; intLoop++) {
if ((opt[intLoop].selected) ||
(opt[intLoop].checked)) {
index = selected.length;
selected[index] = new Object;
selected[index].value = opt[intLoop].value;
selected[index].index = intLoop;
}}return selected;
}
function outputSelected(opt) {
var sel = getSelected(opt);
var strSel = "";
for (var item in sel)
strSel += sel[item].value + ",";
alert("Selected Items:n" + strSel);
}
</script>
</form>
</body>
=========CUT TO HERE==
Reply With Quote
  #8  
Old February 17th, 2004, 02:15 AM
Anonymous Anonymous is offline
Registered User
Codewalkers God 35th Plane (22000 - 22499 posts)
  
Join Date: Apr 2007
Posts: 22,309 Anonymous User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 24
RE: Dynamic multi selection box
Hello,

Thanks for your hint! I get through it!
Reply With Quote
  #9  
Old February 17th, 2004, 02:16 AM
Anonymous Anonymous is offline
Registered User
Codewalkers God 35th Plane (22000 - 22499 posts)
  
Join Date: Apr 2007
Posts: 22,309 Anonymous User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 24
RE: Dynamic multi selection box
Hello,

Thanks for your hint! I get through it!
Reply With Quote
  #10  
Old February 17th, 2004, 02:42 AM
CodeKadiya CodeKadiya is offline
Codewalkers Regular (2000 - 2499 posts)
  
Join Date: Apr 2007
Location: Colombo,Sri Lanka
Posts: 2,313 CodeKadiya User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 4
Send a message via Yahoo to CodeKadiya
RE: Dynamic multi selection box
That's why I was silent. I thought you'll make it with my simple hint
Reply With Quote
Reply

Viewing: Codewalkers Forums > Other Technologies > Client Side Things > Dynamic multi selection box

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread: