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