如果单击“删除”按钮,请选择此选项

时间:2017-06-11 11:00:37

标签: jquery

我遇到的问题是,如果我点击"删除"我的选择框应该消失,我在选择框中选择的选项应该再次出现在下一个选择框中。现在,如果我点击删除它正在消失,但该选项似乎在其他选择字段中不可用。



var uniqId = 1;
        var selectedOptionDataList = new Array();
        var jsonData = [
        		{'name': 'A', 'value': 'A'},
            {'name': 'B', 'value': 'B'},
            {'name': 'C', 'value': 'C'},
            {'name': 'D', 'value': 'D'}
            
        ];

        function regenerateSelectbox(){
        		$('select.dyn-select').each(function(){
            		var _selector = $(this);
                var _curVal = _selector.val();
                
                _selector.html(generateOption());
                if(_curVal == ""){
                		_selector.append('<option value="'+ _curVal +'">select</option>');
                }else{
                		_selector.append('<option value="'+ _curVal +'">'+ _curVal +'</option>');
                }
                _selector.val(_curVal);
            })
        }

        function checkOptionExistences(listOptionVal){
        		var _found = false;
            
        		$.each(selectedOptionDataList, function(inn, vnn){	
              	if(vnn.selectboxoption == listOptionVal){
              			_found = true;
                }
            });
            
            return _found;
        }

        function generateOption(){
        		var optionArr = new Array();
            optionArr.push('<option value="">select</option>');
            
        		$.each(jsonData, function(i, v){
            		if(!checkOptionExistences(v.value)){
            			optionArr.push('<option value="'+ v.value +'">'+ v.name +'</option>');
                }
            });
            
            return optionArr.join('\n');
        }

        function removeSelectedOptionFromList(param){
        		var tmpArrList = selectedOptionDataList;
            selectedOptionDataList = new Array();
            
            $.each(tmpArrList, function(i, v){
            		if(param.selectboxid != v.selectboxid){
                		selectedOptionDataList.push({'selectboxid':v.selectboxid, 'selectboxoption':v.selectboxoption});
                }
            });
        }

        function selectedOptionList(param){
        		var _found = false;
        		$.each(selectedOptionDataList, function(i, v){
            		if(param.selectboxid == v.selectboxid){
                		_found = true;
                		v.selectboxoption = param.selectboxoption;
                }
            });
            
            if(!_found){
        				selectedOptionDataList.push({'selectboxid':param.selectboxid, 'selectboxoption':param.selectboxoption});
            }
        }

        $('#btn-create').click(function(){
        		if(selectedOptionDataList.length == jsonData.length){
            		alert('No data available');
            }else{
        			$('div#selectField-wrapper').append('<div><a class="remove_field">remove</a><select class="dyn-select" id="select-'+ uniqId +'">'+ generateOption() +'</select><div><br>');
            	uniqId++;
            }
        });

        $(document).on('change', 'select.dyn-select', function(){
        		var _selector = $(this);
        		if(_selector.val() == ""){
            		removeSelectedOptionFromList({'selectboxid':_selector.attr('id')});
            }else{
            		selectedOptionList({'selectboxid':_selector.attr('id'), 'selectboxoption':_selector.val()});
            }
            
            regenerateSelectbox();
        });
        
        $('#dropdown-wrapper').on('click', ".remove_field", function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
          });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-wrapper" class="row">

   <div class="col-md-3" id='selectField-wrapper'>
   </div>
   
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案