How do I add counter to html listbox using jquery

peter-cooper
peter-cooper used Ask the Experts™
on
Hello
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

<script>
		$(function () {
			$('.switch-item').click(function (e) {
				e.preventDefault();
				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');
					notif({
						type: "NewBoxError",
						msg: "You must enter box(es) for destruction",
						height: 99,
						position: "top",
						fade: true
						
					});
					return false;
				}
				$('#boxdest2 option').prop({
					selected: true
				});
			});
			
		});
	</script>

Open in new window


html code

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

<?php
	$i=0;
	while($row = mysql_fetch_array($result)) {
?>
	<option value="<?php echo $row["custref"];?>"><?php echo $row["custref"];?></option>
<?php
	$i++;
	}
?>
	</select>
	<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>
	  </span>
	  <select name="boxdest2[]" id="boxdest2" size="7" multiple="multiple"></select>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2008
Top Expert 2008
Commented:
			$('.switch-item').click(function (e) {
				e.preventDefault();
				var src = $(this).data('src');
				var dst = $(this).data('dst');
				var sel = $('#' + src + ' option:selected').detach();
				$('#' + dst).append(sel);

				/* if you put <span id="counter"></span> somewhere in the markup, then it should be updated with the number of items
					if you add the following line:
				*/
				$('#counter').html( $('#boxdest2 option').length );
			});

Open in new window

Author

Commented:
Hielo. Excellent. Thanks very much

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial