如何停止在选择列表框中添加重复值

时间：2017-03-19 18:58:31

标签： javascript html css

我是java脚本的新手。我想防止将重复值添加到第四个列表框。例如，它与下面的不同相同.i）纸制造商＆lt;＆lt;纸转换器＆lt;＆lt;模塑纸浆产品
ii）纸制造商＆lt;＆lt;纸转换器＆lt;＆lt;模塑纸浆产品
如果第四个框中没有值，则“删除类别”按钮应处于禁用模式。如果有价值观和如果我在第4个框中选择任何值，则应启用“删除类别”按钮＆amp;应禁用“添加类别”按钮。

$(document).ready(function() {
		var firstCategorySelector = '.select-manage-category';
	var secondCategorySelector = '.select-manage-category1';
	var thirdCategorySelector = '.select-manage-category2';
	var firstCategory = $(firstCategorySelector);
	var secondCategory = $(secondCategorySelector);
	var thirdCategory = $(thirdCategorySelector);
	var addCategoryButton = $("#add-category");
	var removeCategoryButton = $('#remove-category');
	var selectedList = $('#selected-lst-values');
	var choice = $("#tget");
	$('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() {
		AddCategoryButtonEnable();
	});

	function getCategoryValues() {
		var firstCategoryValue = firstCategory.val();
		var secondCategoryValue = secondCategory.val();
		var thirdCategoryValue = thirdCategory.val();
		return [firstCategoryValue, secondCategoryValue, thirdCategoryValue];
	}

	function isDisableAddButton() {
		var values = getCategoryValues();
		return (!values[0] || !values[1] || !values[2]);
	}

	function AddCategoryButtonEnable() {
		var isDisableAddCategoryButton = isDisableAddButton();
		addCategoryButton.prop("disabled", isDisableAddCategoryButton).toggleClass('text-bold', isDisableAddCategoryButton);
	}

	function getNumberOfSelectedOption() {
		return selectedList.find("option").length;
	}

	function getAvailableChoice() {
		return 20 - parseInt(getNumberOfSelectedOption());
	}

	function setAvailableChoice($numChoice) {
		var strText = ($numChoice !== 20) ? $numChoice + " more " : "up to 20 ";
			choice.text(strText);
	}

	function appendChoice() {
			var count="";
			var givenCategoryArrayValue = getCategoryValues();
			if ($('#selected-lst-values option:contains("' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '")').length > 0) {alert('This category has already been added.');
			return count=1;
		}
			else {
				selectedList.append('<option value="'+ givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] +'">' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '</option>');
		    return count=2;
		         }
		}
	addCategoryButton.click(function() {
			var availableChoice = getAvailableChoice();
			if (availableChoice >= 1) {
				var a=appendChoice();
				if(a==2){
				setAvailableChoice(availableChoice - 1);
				}
			} else {
				setAvailableChoice(0);
			}
		});
		var option = selectedList.find('option:selected');
		selectedList.change(function() {
			removeCategoryButton.prop("disabled", false);
			addCategoryButton.prop("disabled", true);
			_addRemoveButtonClickListener();
		});

	function _addRemoveButtonClickListener() {
			removeCategoryButton.click(function() {
				selectedList.find('option:selected').remove();
				var availableChoice = getAvailableChoice();
				if (0 < availableChoice < 6) {
					setAvailableChoice(availableChoice);
				} else {
					setAvailableChoice(0);
				}
				removeCategoryButton.prop("disabled", true);
			});
		}
	});
.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 value="1">Paper Manufacturers</option>
		<option value="2">Paper Products Suppliers</option>
		<option value="3">Paper Chemicals Suppliers</option>
	</select></div>

	<div><select class="form-control select-manage-category1" size="5">
		<option value="1">Paper Converters</option>
		<option value="2">Lab Apparatus & Supplies</option>
		<option value="3">Service Providers</option>
	</select></div>
	<div><select class="form-control select-manage-category2" size="5">
		<option value="1">Molded Pulp Products</option>
		<option value="2">Software Vendors</option>
		<option value="3">Information Services</option>
	</select>
</div>
<p style="padding-top:10px;color:red;">You can add <span id="target">up to 5</span> 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>

2 个答案:

答案 0 :(得分：0)

使用此脚本。如果尝试添加重复条目，它将显示警报。我在函数appendChoice（）中已经改变了。

    $(document).ready(function () {
        var firstCategorySelector = '.select-manage-category';
        var secondCategorySelector = '.select-manage-category1';
        var thirdCategorySelector = '.select-manage-category2';

        var firstCategory = $(firstCategorySelector);
        var secondCategory = $(secondCategorySelector);
        var thirdCategory = $(thirdCategorySelector);

        var addCategoryButton = $("#add-category");
        var removeCategoryButton = $('#remove-category');
        var selectedList = $('#selected-lst-values');
        var choice = $("#target");


        $('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function () {
            AddCategoryButtonEnable();
        });

        function getCategoryValues() {
            var firstCategoryValue = firstCategory.val();
            var secondCategoryValue = secondCategory.val();
            var thirdCategoryValue = thirdCategory.val();
            return [firstCategoryValue, secondCategoryValue, thirdCategoryValue];
        }

        function isDisableAddButton() {
            var values = getCategoryValues();
            return (!values[0] || !values[1] || !values[2]);
        }


        function AddCategoryButtonEnable() {
            var isDisableAddCategoryButton = isDisableAddButton();

            addCategoryButton.prop("disabled", isDisableAddCategoryButton).toggleClass('text-bold', isDisableAddCategoryButton);
        }

        function getNumberOfSelectedOption() {
            return selectedList.find("option").length;
        }

        function getAvailableChoice() {
            return 5 - parseInt(getNumberOfSelectedOption());
        }

        function setAvailableChoice($numChoice) {

            var strText = ($numChoice !== 5) ? $numChoice + " more " : "up to 5 ";

            choice.text(strText);
        }

        function appendChoice() {
            var givenCategoryArrayValue = getCategoryValues();
            if ($('#selected-lst-values option:contains("' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '")').length > 0)
                alert('Duplicate value not allowed.');
            else
                selectedList.append('<option value="">' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '</option>');
        }

        addCategoryButton.click(function () {
            var availableChoice = getAvailableChoice();
            if (availableChoice >= 1) {
                appendChoice();
                setAvailableChoice(availableChoice - 1);
            } else {
                setAvailableChoice(0);
            }
        });

        var option = selectedList.find('option:selected');

        selectedList.change(function () {
            removeCategoryButton.prop("disabled", false);
            _addRemoveButtonClickListener();
        });

        function _addRemoveButtonClickListener() {
            removeCategoryButton.click(function () {
                selectedList.find('option:selected').remove();
                var availableChoice = getAvailableChoice();
                if (0 < availableChoice < 6) {
                    setAvailableChoice(availableChoice);
                } else {
                    setAvailableChoice(0);
                }
            });
        }
    });

答案 1 :(得分：0)

检查工作代码段

＆＃13;
＆＃13; 
	$(document).ready(function() {
		var firstCategorySelector = '.select-manage-category';
		var secondCategorySelector = '.select-manage-category1';
		var thirdCategorySelector = '.select-manage-category2';

		var firstCategory = $(firstCategorySelector);
		var secondCategory = $(secondCategorySelector);
		var thirdCategory = $(thirdCategorySelector);

		var addCategoryButton = $("#add-category");
		var removeCategoryButton = $('#remove-category');
		var selectedList = $('#selected-lst-values');
		var choice = $("#target");

		
		$('.select-manage-category, .select-manage-category1, .select-manage-category2').change(function() {
			AddCategoryButtonEnable();
		});

		function getCategoryValues() {
			var firstCategoryValue 	= firstCategory.val();
			var secondCategoryValue = secondCategory.val();
			var thirdCategoryValue = thirdCategory.val();
			return [firstCategoryValue, secondCategoryValue, thirdCategoryValue];		
		}

		function isDisableAddButton(){
			var values = getCategoryValues();
			return (!values[0] || !values[1] || !values[2]);
		}


		function AddCategoryButtonEnable() {
			var isDisableAddCategoryButton = isDisableAddButton();
		
			addCategoryButton.prop("disabled", isDisableAddCategoryButton).toggleClass('text-bold', isDisableAddCategoryButton );
		}

		function getNumberOfSelectedOption(){
			return selectedList.find("option").length; 
		}

		function getAvailableChoice(){
			return 5 - parseInt(getNumberOfSelectedOption());
		}

		function setAvailableChoice($numChoice){
    
    	var strText = ($numChoice !== 5) ? $numChoice + " more " : "up to 5 ";
      
			choice.text(strText);
		}

		function appendChoice(){
			var givenCategoryArrayValue = getCategoryValues();	
              if ($('#selected-lst-values option:contains("' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '")').length > 0)
                alert('Duplicate value not allowed.');
            else
			   selectedList.append('<option value="">' + givenCategoryArrayValue[0] + ' << ' + givenCategoryArrayValue[1] + ' << ' + givenCategoryArrayValue[2] + '</option>');	
		}

		addCategoryButton.click(function() {		
			var availableChoice = getAvailableChoice();
			if(availableChoice >= 1){
				appendChoice();
				setAvailableChoice(availableChoice - 1);
			} else {
				setAvailableChoice(0);
			}     			
		});

		var option = selectedList.find('option:selected');

		selectedList.change(function(){
			removeCategoryButton.prop("disabled", false);
            addCategoryButton.prop("disabled", true);
			_addRemoveButtonClickListener();
		});

		function _addRemoveButtonClickListener(){
			removeCategoryButton.click(function() {
				selectedList.find('option:selected').remove();
				var availableChoice = getAvailableChoice();
				if(0 < availableChoice < 6){				
					setAvailableChoice(availableChoice);
				} else {
					setAvailableChoice(0);
				}  
                removeCategoryButton.prop("disabled", true);   			
			});
		}
	});
＆＃13; 
.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%;
}
＆＃13; 
<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 <span id="target">up to 5</span> 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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题