Link to home
Start Free TrialLog in
Avatar of peter-cooper

asked on

How do I add counter to html listbox using jquery

I am using the attached jquery to populate select listbox1 to select listbox2. The idea is when a user adds items to listbox2 from listbox1 a counter will increment to show how many items were added. Likewise, when a user removes items from listbox2, it decrements the counter.

I would appreciate some help with this as I have never done a counter in jquery. Thanks

jquery code

		$(function () {
			$('.switch-item').click(function (e) {
				var src = $(this).data('src');
				var dst = $(this).data('dst');
				var sel = $('#' + src + ' option:selected').detach();
				$('#' + dst).append(sel);
			$('form').submit(function () {
				if ($('#boxdest2').children().length == 0) {
    			//alert('You must enter box(es) for destruction');
						type: "NewBoxError",
						msg: "You must enter box(es) for destruction",
						height: 99,
						position: "top",
						fade: true
					return false;
				$('#boxdest2 option').prop({
					selected: true

Open in new window

html code

<select name="boxdest[]" id="boxdest" size="7" multiple="multiple">

	while($row = mysql_fetch_array($result)) {
	<option value="<?php echo $row["custref"];?>"><?php echo $row["custref"];?></option>
	<span style="display: inline-block; width: 70px; height: 82px; padding-left: 10px; padding-right: 10px; vertical-align: top;margin-top:35px;">
         <button class="btn btn-primary switch-item" data-src="boxdest" data-dst="boxdest2">&gt;</button>
    	 <button class="btn btn-primary switch-item" data-dst="boxdest" data-src="boxdest2">&lt;</button>
	  <select name="boxdest2[]" id="boxdest2" size="7" multiple="multiple"></select>

Open in new window

Avatar of hielo
Flag of Wallis and Futuna image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of peter-cooper


Hielo. Excellent. Thanks very much