在按鈕上添加選擇框，並在上一個選擇框中未選中選項

我在我的一個項目中遇到了難題，我需要每次添加選擇字段時單擊按鈕。在按鈕上添加選擇框，並在上一個選擇框中未選中選項

以下是我嘗試過的最新代碼，但我無法刪除之前添加的選擇框中已經選擇的值。另外，我想，如果我刪除或chnage的選擇框的任何值，那麼這是應該選擇在其他selectboxes再次可用之前選擇框的值..

下面是代碼：

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>"); 
 
    }); 
 
    } 
 

 
}); 
 
     });

<!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>

來源

2017-04-09 Ayushi Tomar

你可以上傳你的要求截圖。 – Alok

下面的工作示例。 Working Fiddle如果有幫助，然後upvote它。

var uniqId = 1; 
 
var selectedOptionDataList = new Array(); 
 
var jsonData = [ 
 
\t \t {'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(){ 
 
\t \t $('select.dyn-select').each(function(){ 
 
    \t \t var _selector = $(this); 
 
     var _curVal = _selector.val(); 
 
     
 
     _selector.html(generateOption()); 
 
     if(_curVal == ""){ 
 
     \t \t _selector.append('<option value="'+ _curVal +'">select</option>'); 
 
     }else{ 
 
     \t \t _selector.append('<option value="'+ _curVal +'">'+ _curVal +'</option>'); 
 
     } 
 
     _selector.val(_curVal); 
 
    }) 
 
} 
 

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

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

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

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

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

 
$(document).on('change', 'select.dyn-select', function(){ 
 
\t \t var _selector = $(this); 
 
\t \t if(_selector.val() == ""){ 
 
    \t \t removeSelectedOptionFromList({'selectboxid':_selector.attr('id')}); 
 
    }else{ 
 
    \t \t selectedOptionList({'selectboxid':_selector.attr('id'), 'selectboxoption':_selector.val()}); 
 
    } 
 
    
 
    regenerateSelectbox(); 
 
});

<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>

來源

2017-04-09 16:07:27 Alok

謝謝:)它幫助 –

然後投票答案，如果它有幫助。 :) – Alok

我怎樣纔能有輸入框可用每次當我改變選項對應的特定選項？ –

在按鈕上添加選擇框，並在上一個選擇框中未選中選項

回答

相關問題