リストを選択する際の制限を追加する方法

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> 

しかし、あなたに質問がある場合は、それが助けて欲しいです！応援!!