Solved

jQuery/javascript plugin advice

Posted on 2008-06-16
7
1,113 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
  • 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 100 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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 400 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

839 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