使用JavaScript填充select's选项并删除它们

这是一个可能的解决方案:

步骤:

• 为每个季度的选择控件添加一个类(假设为"q-1")。这样做是为了处理每个控件中选择控件的更改事件季度
• 创建一个名为"PopulatePositions"的方法，该方法总是清除选择控件中的任何现有值并填充新值。这是为了在更改事件期间刷新选择控件。
• 处理每个季度选择控件的更改事件，并与称为'HandleSelection'的通用方法连接(逻辑很简单)。参见方法)

//Creates an array of players
 var aRoster = ["Phil", "Erik", "Dave", "Jimbo", "Billy Ray", "Sean", "Joe", "PP", "Shelly", "Mathew", "Scott", "Jarvis", "Hazard", "Ibra"]; 
 //Creates an array of positions players can play
 var aPositions = ["--", "LF", "RF", "LM", "LCM", "RCM", "RM", "CB", "LB", "SW", "RB", "K"];
var htmlStr = "<table class='table-bordered'><thread><tr><th class='col-xs-4'>Name</th><th class='col-xs-2'>Q1</th><th class='col-xs-2'>Q2</th><th class='col-xs-2'>Q3</th><th class='col-xs-2'>Q4</th></tr></thread><tbody>";
//Goes through a loop that puts each player in the table. Gives them an unique selector for each of the 4 quarters 
for(var i=0; i < aRoster.length; ++i) 
{
    htmlStr += "<tr>";
    htmlStr += "<td>" + aRoster[i] + "</td>";
    htmlStr += "<td>" + "<select id=" + "'" + i +"positionQ1' class='form-control q-1'></select>" + "</td>";
    htmlStr += "<td>" + "<select id=" + "'" + i +"positionQ2' class='form-control q-2'></select>" + "</td>";
    htmlStr += "<td>" + "<select id=" + "'" + i +"positionQ3' class='form-control q-3'></select>" + "</td>";
    htmlStr += "<td>" + "<select id=" + "'" + i +"positionQ4' class='form-control q-4'></select>" + "</td>";
    htmlStr += "</tr>";
}
htmlStr += "</tbody></table>";
$('#roster-table').html(htmlStr);
//For each of the player's selectors, populate it with each positon
PopulateQ1Positions();
PopulateQ2Positions();
PopulateQ3Positions();
PopulateQ4Positions();
function PopulateQ1Positions(retainSelection)
{
  for (var i = 0; i < aRoster.length; i++) 
  {
    var selectQ1 = document.getElementById( i+'positionQ1' );  
    
    var currentSelectedValue = $(selectQ1).val();
  
    $(selectQ1).empty();   
  
    for (var j = 0; j < aPositions.length; j++) 
    {
        selectQ1.options.add(new Option(aPositions[j], aPositions[j]));       
    }
    
    if (retainSelection==true)
      {    
        $(selectQ1).val(currentSelectedValue);
      }
  }  
}
function PopulateQ2Positions(retainSelection)
{
  for (var i = 0; i < aRoster.length; i++) 
  {
    var selectQ2 = document.getElementById( i+'positionQ2' ); 
    
    var currentSelectedValue = $(selectQ2).val();
  
    $(selectQ2).empty();   
  
    for (var j = 0; j < aPositions.length; j++) 
    {
        selectQ2.options.add(new Option(aPositions[j], aPositions[j]));       
    }
    
    if (retainSelection==true)
      {    
        $(selectQ2).val(currentSelectedValue);
      }
  }  
}
function PopulateQ3Positions(retainSelection)
{
  for (var i = 0; i < aRoster.length; i++) 
  {
    var selectQ3 = document.getElementById( i+'positionQ3' );  
    
    var currentSelectedValue = $(selectQ3).val();
  
    $(selectQ3).empty();   
  
    for (var j = 0; j < aPositions.length; j++) 
    {
        selectQ3.options.add(new Option(aPositions[j], aPositions[j]));       
    }
    
    if (retainSelection==true)
      {    
        $(selectQ3).val(currentSelectedValue);
      }
  }  
}
function PopulateQ4Positions(retainSelection)
{
  for (var i = 0; i < aRoster.length; i++) 
  {
    var selectQ4 = document.getElementById( i+'positionQ4' ); 
    
    var currentSelectedValue = $(selectQ4).val();
  
    $(selectQ4).empty();   
  
    for (var j = 0; j < aPositions.length; j++) 
    {
        selectQ4.options.add(new Option(aPositions[j], aPositions[j]));       
    }
    
    if (retainSelection==true)
      {    
        $(selectQ4).val(currentSelectedValue);
      }
  }  
}

//events
var q1SelectCtrl = $('.q-1');
var q2SelectCtrl = $('.q-2');
var q3SelectCtrl = $('.q-3');
var q4SelectCtrl = $('.q-4');
q1SelectCtrl.on('change', function()
  {  
     HandleSelection($(this), 'q1');       
  });
q2SelectCtrl.on('change', function()
  {  
     HandleSelection($(this), 'q2');       
  });
q3SelectCtrl.on('change', function()
  {  
     HandleSelection($(this), 'q3');       
  });
q4SelectCtrl.on('change', function()
  {  
     HandleSelection($(this), 'q4');       
  });
function HandleSelection(thisCtrl, target)
{
     var selectedValue = thisCtrl.val();
     var selectedCtrlId = thisCtrl.attr('id');  
  
     var quarterCtrls = null;
  
     if (target == 'q1')
       {
         quarterCtrls = q1SelectCtrl;
         PopulateQ1Positions(true); //refresh
       }
       else if (target == 'q2')
       {
         quarterCtrls = q2SelectCtrl;
         PopulateQ2Positions(true); //refresh
       }
       else if (target == 'q3')
       {
         quarterCtrls = q3SelectCtrl;
         PopulateQ3Positions(true); //refresh
       }
       else if (target == 'q4')
       {
         quarterCtrls = q4SelectCtrl;
         PopulateQ4Positions(true); //refresh
       }
     
  
     thisCtrl.val(selectedValue);
  
     var qSelectedValueArray = [];
  
     $.each(quarterCtrls, function(ctrlIndex, selectCtrl)
     {
       if ($(selectCtrl).val() != '--')
       {
           var item = {};
           item.Value = $(selectCtrl).val();
           item.ControlId = $(selectCtrl).attr('id');
           
         qSelectedValueArray.push(item);
       }
     });    
   
  
     $.each(quarterCtrls, function(ctrlIndex, selectCtrl)
     {
        $.each(qSelectedValueArray, function(itemIndex, qSelectedValue){
            
            if (qSelectedValue.ControlId != $(selectCtrl).attr('id'))
            {
               $(selectCtrl).find('option[value="'+qSelectedValue.Value+'"]').remove();
            }
        });
       
     });   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="roster-table"></div>