Solved

jQuery/javascript plugin advice

Posted on 2008-06-16
7
1,093 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now