Question

我在我的一个项目中面临困难，我需要在每次点击按钮时添加选择字段。

以下是我尝试过的最新代码，但我无法删除之前添加的selectbox中已选择的值。此外，我希望如果我删除或选择任何选择框的值，那么之前选择的选择框的值应该在其他选择框中再次可用..

以下是代码：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $(document).ready(function() {
  var listy = [
               {display: 'A', value: 'A'},
               {display: 'B', value: 'B'}];
  var paczki = [
                {display: 'C', value: 'C'},
                {display: 'D', value: 'D'}];

  var max_fields = 7;
  var wrapper = $('.input_fields_wrap');
  var add_button = $('.add_field_button');
  var x = 1;

  $(add_button).click(function(e) {
      e.preventDefault();
      if (x < max_fields) {
        x++;
        $(wrapper).append("<div><label for='service'>Usługa</label>" +
          "<select name='service' class='service' <!-- here -->" +
          "<option value='Wybierz' selected>Wybierz</option>" +
          "<option value='Listy'>Listy</option>" +
          "<option value='Paczki'>Paczki</option>" +
          "</select><a href='#' class='remove_field'>Remove</a>" +
          "<select name='type' class='type'></select>" +
          "</div>");
      }
    })
  // .trigger('click')

  $(wrapper).on('click', ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });

  $(wrapper).on('change', '.service', function(e) {
    e.preventDefault();
    var parent = $(this).val();
    switch (parent) {
      case 'Listy':
        list(listy, $(this).next().next());
        break;
      case 'Paczki':
        list(paczki, $(this).next().next());
        break;
      // TODO: add case for Wybierz
    }
  });
  function list(array_list, element) {
    $(element).html("");
    $(array_list).each(function(i) {
      $(element).append("<option value=" + array_list[i].value + ">" + array_list[i].display + "</option>");
    });
  }

});
      });

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>

  <body>
    <div class='input_fields_wrap'>
<button class='add_field_button'>Add more fields</button>
</div>
    
  </body>

</html>

＆＃13;

Answer 1

以下是工作示例。 Working Fiddle如果它有帮助那么就可以投票。

＆＃13;

var uniqId = 1;
var selectedOptionDataList = new Array();
var jsonData = [
		{'name': 'Peter', 'value': 'Peter'},
    {'name': 'Sam', 'value': 'Sam'},
    {'name': 'Arjun', 'value': 'Arjun'},
    {'name': 'Mohan', 'value': 'Mohan'},
    {'name': 'Smith', 'value': 'Smith'},
    {'name': 'John', 'value': 'John'},
    {'name': 'Scott', 'value': 'Scott'},
    {'name': 'Suman', 'value': 'Suman'},
    {'name': 'Priti', 'value': 'Priti'}
];

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#dropdown-wrapper').append('<select class="dyn-select" id="select-'+ uniqId +'">'+ generateOption() +'</select>');
    	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();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="btn-create">
  Add Dropdown
</button>
<div id="dropdown-wrapper"></div>

＆＃13;

在按钮单击上添加选择框，在前一个选择框中未选中该选项

1 个答案: