?
Solved

jQuery/javascript plugin advice

Posted on 2008-06-16
7
Medium Priority
?
1,135 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

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…
Suggested Courses

777 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