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

asked on

How do I add counter to html listbox using jquery

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

ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
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
peter-cooper

ASKER

Hielo. Excellent. Thanks very much