Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1151
  • Last Modified:

jQuery/javascript plugin advice

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
newbie27
Asked:
newbie27
  • 3
  • 3
2 Solutions
 
Ali KayahanFull Stack DeveloperCommented:
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
 
newbie27Author Commented:
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
 
Ali KayahanFull Stack DeveloperCommented:
  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's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
newbie27Author Commented:
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
 
hieloCommented:
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
 
Ali KayahanFull Stack DeveloperCommented:
"can we not change the events by using the onclick events on the buttons please?" What you mean by that ?
0
 
newbie27Author Commented:
thanks hielo, that worked !
0

Featured Post

Industry Leaders: 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!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now