如何在選擇列表中添加限制

Question

嗨，我是新來的jQuery，我想讓人們只選擇5個類別，並在每個選擇&刪除，數量應該減少&增加，而不是「你可以添加最多5個類別「，它應該顯示」您可以添加4個類別「。

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

.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> 
 
\t \t </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> 
 
\t \t </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"> 
 
\t \t \t \t \t \t \t </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> 

但是，只是問你是否有問題，希望它有幫助！歡呼！！