如何添加选择列表的限制

Question

嗨，我是jQuery的新手，我想允许人们只选择5个类别，每次选择和删除时，数量应该减少和增加，而不是这个"你最多可以添加5个类别"它应该显示这个"你可以再添加4个类别。

$(document).ready(function() {
	var one = $('.select-manage-category').val();
	var two = $('.select-manage-category1').val();
	var three = $('.select-manage-category2').val();
	$('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() {
		var one = $('.select-manage-category').val();
		var two = $('.select-manage-category1').val();
		var three = $('.select-manage-category2').val();
		if (one && two && three) {
			$("#add-category").prop("disabled", false).css({
				'font-weight': 'bold'
			});
		} else {
			$("#add-category").prop("disabled", true).css({
				'font-weight': 'normal'
			});
		}
	});
	$('#add-category').click(function() {
		$('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $('.select-manage-category').val() + ' << ' + $('.select-manage-category1').val() + ' << ' + $('.select-manage-category2').val() + '</option>');
	});
  
	$('#selected-lst-values option').each(function() {
		if ($(this).val() == '') {
    alert('ffdgdfgf');
			$('#remove-category').prop('disabled', true).css({
				'font-weight': 'normal'
			});
		} else {
			$('#remove-category').prop('disabled', false).css({
				'font-weight': 'bold'
			});
		}
	});
  
  	$('#remove-category').click(function() {
		$('#selected-lst-values option:selected').remove();
	});
});

.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
  width: 100px;
  float: left;
  margin-right: 4px;
}
p {
  clear: left;
  text-align: center;
}
#selected-lst-values {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control select-manage-category" size="5">
    <option>Paper Manufacturers</option>
    <option>Paper Products Suppliers</option>
    <option>Paper Chemicals Suppliers</option>
</select></div>
<div><select class="form-control select-manage-category1" size="5">
    <option>Paper Converters</option>
    <option>Lab Apparatus & Supplies</option>
    <option>Service Providers</option>
		</select></div>
<div><select class="form-control select-manage-category2" size="5">
    <option>Molded Pulp Products</option>
    <option>Software Vendors</option>
    <option>Information Services</option>
		</select>
</div>
<p style="padding-top:10px;color:red;">You can add up to 5 categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category" disabled="true">
<input id="remove-category" name="add" type="button" value="Remove Category" disabled="true">
<div><select id="selected-lst-values" class="form-group percent-100" size="7" multiple="multiple">
							</select></div>
<button id="mnage-category-savebtn" class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save Categories</strong> <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span></button>

Answer 1

这是一个工作版本，它将处理显示有多少可用的选择。由于睡眠过程，代码有点混乱...

<pre> <code> https://jsfiddle.net/at8ahu7c/2/ </code> </pre> 

但是，如果您有问题，请询问，希望对您有所帮助！欢呼！！