?
Solved

jQuery/javascript plugin advice

Posted on 2008-06-16
7
Medium Priority
?
1,147 Views
Last Modified: 2011-10-19
Hello Experts,
I wonder If there is any jQuery plugin for 2 drop down list box which could be used to select one are all from one list to another list.
Something like one attached.
Please can you advice or is it easily be done in javascript?
Thanks for your help
Regards
S
screen.JPG
0
Comment
Question by:newbie27
[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
  • 3
  • 3
7 Comments
 
LVL 14

Expert Comment

by:Ali Kayahan
ID: 21794358
Save the file as lib.js and link it from the document that you are using ,than you can use the PHP code below to dynamically populate DropDowns,if you dont use php basicly logic is that ;
<form action="#" method="post" >
<select class="inputbox" name="cat" onChange="filterSelect(subcat,this)">
 <option value="">--Select Category--</option>
<option value='test1'>test1</option>
<option value='test2'>test2</option>
</select>
<select class="inputbox" name="subcat" disabled="true">
<option value="" filter="">---Select Subcategory---</option>
<option value='somevalue' filter='test1'>Someoption</option>
<option value='somevalue' filter='test2'>Someoption</option>
</select>
<?php 
 $category = array("scripting","cars","hobbies") ;
 $num1 = count($category) ;
 $subcategory = array("php;asp;jsp","bmw;mercedes;jaguar","swimming;cycling;skieing") ;
?>
<form action="#" method="post" >
<select class="inputbox" name="cat" onChange="filterSelect(subcat,this)">
 <option value="">--Select Category--</option>
<?php 
 for($z = 0;$z < $num1;$z++) {
 	echo "<option value='$category[$z]'>$category[$z]</option>" ;
 }	
?>
</select>
<select class="inputbox" name="subcat" disabled="true">
<option value="" filter="">---Select Subcategory---</option>
<?php 
 for($y = 0;$y < $num1;$y++) {
 	$menus = explode(";",$subcategory[$y]) ;
	$num2 = count($menus);
		for($x = 0 ;$x < $num2;$x++) {
 		echo "<option value='$menus[$x]' filter='$category[$y]'>$menus[$x]</option>" ;
		}
 }	
?>
</select>

Open in new window

lib.txt
0
 
LVL 8

Author Comment

by:newbie27
ID: 21795267
hello,
can you please help me out in this

http://213.253.134.6/artism/admin/list_export.asp

i am trying to add values from list1 to list2

thanks
0
 
LVL 14

Assisted Solution

by:Ali Kayahan
Ali Kayahan earned 400 total points
ID: 21795716
  First download lib.txt that i uploaded above and rename it as lib.js, link it like ;
     <script language="javascript" type="text/javascript" src="lib.js">
   Than use ;
<form action="#" method="post" >
<select class="inputbox" name="cat" onChange="filterSelect(subcat,this)" size="10">
 <option value="">--Select Category--</option>
<option value='support'>Support Admins</option>
<option value='sales'>Sales Admins</option>
<option value='tech'>Techincal Admins</option>
</select>
<select class="inputbox" name="subcat" disabled="true" size="10">
<option value="" filter="">---Select Subcategory---</option>
<option value='spprt1' filter='support'>Support stuff 1</option>
<option value='spprt2' filter='support'>Support stuff 2</option>
<option value='spprt2' filter='support'>Support stuff 3</option>
<option value='sls1' filter='sales'>Sales stuff 1</option>
<option value='sls2' filter='sales'>Sales stuff 2</option>
<option value='sls3' filter='sales'>Sales stuff 3</option>
<option value='tch1' filter='tech'>Technical stuff 1</option>
<option value='tch2' filter='tech'>Technical stuff 2</option>
<option value='tch3' filter='tech'>Technical stuff 3</option>
</select>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 8

Author Comment

by:newbie27
ID: 21796233
thanks, please see
http://213.253.134.6/artism/admin/list_export.asp
can we not change the events by using the onclick events on the buttons please?
0
 
LVL 82

Accepted Solution

by:
hielo earned 1600 total points
ID: 21799419
This works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<base href="http://213.253.134.6/artism/admin/list_export.asp"/>
<title>ehaus Content Administration :: </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="ehaus ltd" />
<meta name="copyright" content="copyright www.ehaus.co.uk" />
<meta name="description" content="ehaus Content Administration" />
<meta name="keywords" content="" />
<meta name="robots" content="all" />
 
<script type="text/javascript" src="include/menu.js"></script>
<script type="text/javascript" src="include/jquery/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="include/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="include/jquery/jquery.jeditable.js"></script>
<script type="text/javascript" src="lists/include/OptionTransfer.js"></script>
<script type="text/javascript" src="lists/include/lib.js"></script>
 
<script type="text/javascript">
	 	var opt = null;	 
</SCRIPT>
 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="styles/screen.css" />
 <link rel="stylesheet" type="text/css" href="include/flexigrid/flexigrid.css">
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="styles/screen_ie6.css" />
<![endif]-->
 
</head>
<body>
<a name="top"></a>
<div id="header">
	<h1><a href="index.asp?">ehaus - Content Manager</a></h1>
</div>
 
<div id="breadcrumb">
	Administration: <a href="index.asp?">Home</a> > 
	<a href="search.asp?">Search</a> > 
	Search Results 
	 
	
 
</div>
<!-- search here -->
 
 
 
<div id="wrapper">
	
<div id="pagetitle">
	<h2>Website Administration: </h2>
	<ul>
		<!--<li class="email">someone@oecd.org</li>-->
		<li><a href="javascript:openWindow('popup_help.asp?hs=/artism/admin/list_export.asp','childwin',450,650);" >Help</a></li>
		<li><a href="/webauth.asp?lgt=Y">Sign Out</a></li>
	</ul>
</div>
	<div id="leftcol">
		<h3>Main Menu</h3>
	<ul id="treemenu1" class="treeview">
	<li class="topmenu"><div><a href="index.asp?">Home</a></div></li>
 
</ul>
 
	
		<!-- SubMenus -->	
		<h3>Display Options</h3>
		<ul class="leftmenu">
			
		<!-- FORMAT FORM START -->
		<!--
		<form name="frmFormat" id="frmFormat">
			<span class="greyheading"><b></b></span>
			<select name="sort" id="sel2" onChange="if(document.frmFormat.sel2.selectedIndex!=0) document.location.href=document.frmFormat.sel2.options[document.frmFormat.sel2.selectedIndex].value">
			<option value="">Select Format..</option>
			<option value="results.asp?">Title</option>
			<option value="results.asp?">ISBN</option>
			</select>
			<script language="JavaScript">document.frmFormat.sel2.selectedIndex=0;</script>
		</form>	
		-->
		<!-- FORMAT FORM END -->
	
		<li><a href="rdbm_results.asp?">Default layout</a></li>
		<li><a href="rdbm_results.asp?">Company layout</a></li>	
 
 
			
			
		</ul>
		
	
	  
	   <h3>Short List</h3>
	  
		 	<!-- include file="lists/include/list_nav.asp" -->
	<!-- /SubMenus -->	
	</div>
	<div id="content">
	<h3>List Manager:</h3> 
    <table width="100%">
	<tr> <td width="20">&nbsp;</td><td>
	<form action="export.asp" name="frmCheck" id="frmCheck" method="post">
								<input type="hidden" name="hidAction" id="hidAction" value="">
								<INPUT type="hidden" name="chkAll" id="chkAll" value="on">
								<INPUT type="hidden" name="hidList" id="hidList" value="7">
								<INPUT type="hidden" name="value_9780900177026" id="value_9780900177026" value=""><INPUT type="hidden" name="value_9780900177064" id="value_9780900177064" value=""><INPUT type="hidden" name="value_9780900177071" id="value_9780900177071" value=""><INPUT type="hidden" name="chkSel9780900177026" id="chkSel9780900177026" value="9780900177026|vanillasite"><INPUT type="hidden" name="chkSel9780900177064" id="chkSel9780900177064" value="9780900177064|vanillasite"><INPUT type="hidden" name="chkSel9780900177071" id="chkSel9780900177071" value="9780900177071|vanillasite">
								<ol class="export">
									<li class="export">You have selected    list items.<br />
									If you wish to change your selection, please go <a href="javascript:viewList(7)">back</a> to the main list manager page.</li>
									<li class="export"> Choose a format for your report.
									<SELECT name="drpformat">
 
										<OPTION value="delimited">Comma Delimited Text [*.dat]</OPTION><OPTION value="delimitedcsv">Comma Delimited Text [*.csv]</OPTION><OPTION value="ftp">ISBN List</OPTION>
									</SELECT>
									</li class="export">
									<li class="export">
										<p>Enter Notes to accompany Report<p>									
										<textarea id="listNotes" name="listNotes" style="width:312px;" rows=3></textarea>
										
									</li>	
									<li>
									<table cellpadding="0" cellspacing="0" border="0" style="width:360px;">
							<TR>
								<TD>
								<SELECT NAME="list1" id="list1" MULTIPLE SIZE=10 onDblClick="opt.transferRight()" style="width:150px;">
									 
  
 
										 <option value="e2007092018174409">Townsend, Richard</option>
										 <option value="e2007092018105659"> Hill, Jeremy</option>
										 <option value="e2007091011051539"> Highfield, Ashley</option>
									
								</SELECT>
								</TD>
								<TD VALIGN=MIDDLE ALIGN=left>
							
									<INPUT TYPE="button" NAME="right" VALUE="&gt;&gt;" ONCLICK="opt.transferRight()" style="width:40px;"><BR><BR>
									<INPUT TYPE="button" NAME="right" VALUE="All &gt;&gt;" ONCLICK="opt.transferAllRight()" style="width:40px;"><BR><BR>
									<INPUT TYPE="button" NAME="left" VALUE="&lt;&lt;" ONCLICK="opt.transferLeft()" style="width:40px;"><BR><BR>
									<INPUT TYPE="button" NAME="left" VALUE="All &lt;&lt;" ONCLICK="opt.transferAllLeft()" style="width:40px;">
									
								</TD>
								<TD>
 
								<SELECT NAME="list2" id="list2" MULTIPLE SIZE=10 onDblClick="opt.transferLeft()"  style="width:150px;">
								
								</SELECT>
								
								</TD></table>
									</li>
									
										<input type="hidden" name="hidFields" id="hidFields" value="|title|Title,|contributor|Author(s),|format|Format,|uk_vat_price|UK Price,|dewey|Dewey,|isbn|ISBN,|barcode|Barcode,|isbn10|ISBN10,|uk_pubdate|Published Date,|imprint|Imprint,|title_notes|Notes">
										
						
									<br />
									<li class="export"><input onclick="this.form.hidAction.value='email';" class="radio" type="radio" name="optType" id="optType" value="E">Email Report to: &nbsp;<input type="text" value="" name="txtEmail" id="txtEmail" size="36" style="border: solid 1px #7F9DB9; height:17px; "></li>
									<li class="export"><input onclick="this.form.hidAction.value='doTheExport'" class="radio" type="radio" name="optType" id="optType" value="D">Download Report</li>
									<li class="export"><input onclick="this.form.hidAction.value='doTheExport'" class="radio" type="radio" name="optType" id="optType" value="F">Send ISBN List to BDS requesting:
										<br />
 
										 
									</li>
									<li class="export"><div class="formbutton"><a href="javascript:alert('submit');" class="button" title="Submit">Submit</a></div></li>
								</ol>
								
								<br /><br />
								<!--this.form.submit()">-->
								<br /><br />
								
<select class="inputbox" name="cat" onChange="filterSelect(subcat,this)" size="10">
 <option value="">--Select Category--</option>
<option value='support'>Support Admins</option>
<option value='sales'>Sales Admins</option>
<option value='tech'>Techincal Admins</option>
</select>
<select class="inputbox" name="subcat" disabled="true" size="10">
<option value="" filter="">---Select Subcategory---</option>
<option value='spprt1' filter='support'>Support stuff 1</option>
<option value='spprt2' filter='support'>Support stuff 2</option>
<option value='spprt2' filter='support'>Support stuff 3</option>
<option value='sls1' filter='sales'>Sales stuff 1</option>
<option value='sls2' filter='sales'>Sales stuff 2</option>
<option value='sls3' filter='sales'>Sales stuff 3</option>
<option value='tch1' filter='tech'>Technical stuff 1</option>
<option value='tch2' filter='tech'>Technical stuff 2</option>
<option value='tch3' filter='tech'>Technical stuff 3</option>
</select>
 
								</form>
							
	  		</td></tr></table>
	   <div style="float: left;"></div>
		 
	
	</div><!-- content -->
	
<div style="clear: both;"></div><br />
	<div id="footer">
		<ul>
			<li><a href="http://www.ehaus.co.uk" target="_blank">Copyright &copy; Ehaus Ltd.</a></li>
			<li><a href="index.asp?">Home</a></li>
			<li><a href="contact.asp?" class="last">Contact us</a></li>
		</ul>
	</div>	
 
</div><!-- wrapper -->
 
<script type="text/javascript">
//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
 
		opt = new OptionTransfer( document.getElementById("list1"),document.getElementById("list2") );
		opt.setAutoSort(false);
		opt.setDelimiter(",");
		opt.saveNewLeftOptions("newLeft");
		opt.saveNewRightOptions("newRight");
 
</script>
</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:Ali Kayahan
ID: 21801191
"can we not change the events by using the onclick events on the buttons please?" What you mean by that ?
0
 
LVL 8

Author Closing Comment

by:newbie27
ID: 31467632
thanks hielo, that worked !
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

649 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