Question

我正在创建一个页面，允许用户将玩家分配到位置。我有一系列玩家名字，以及任何玩家可以玩的阵地。每个球员都可以在4个季度中的任何一个位置打任何位置。但是，在同一季度，两名球员无法发挥相同的位置。

我的问题是，一旦将一个位置分配给该季度的另一个玩家，我就无法弄清楚如何从选择选项中删除一个位置（并且如果它被添加到列表中的位置）已被选中然后取消选择。）

这是我创建表格的Javascript。每一行都有一个玩家的名字和四个季度中的每一个的选择选项。

 //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'></select>" + "</td>";
    htmlStr += "<td>" + "<select id=" + "'" + i +"positionQ2' class='form-control'></select>" + "</td>";
    htmlStr += "<td>" + "<select id=" + "'" + i +"positionQ3' class='form-control'></select>" + "</td>";
    htmlStr += "<td>" + "<select id=" + "'" + i +"positionQ4' class='form-control'></select>" + "</td>";
    htmlStr += "</tr>";
}
htmlStr += "</tbody></table>";
$('#roster-table').html(htmlStr);

//For each of the player's selectors, populate it with each positon
for (var i = 0; i < aRoster.length; i++) 
{
    var selectQ1 = document.getElementById( i+'positionQ1' );
    var selectQ2 = document.getElementById( i+'positionQ2' );
    var selectQ3 = document.getElementById( i+'positionQ3' );
    var selectQ4 = document.getElementById( i+'positionQ4' );
    for (var j = 0; j < aPositions.length; j++) 
    {
        selectQ1.options.add(new Option(aPositions[j], aPositions[j]));
        selectQ2.options.add(new Option(aPositions[j], aPositions[j]));
        selectQ3.options.add(new Option(aPositions[j], aPositions[j]));
        selectQ4.options.add(new Option(aPositions[j], aPositions[j]));
    }
}

非常感谢！

Answer 1

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

<强>步骤：

在每个季度为选择控件添加一个类（比如说“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>

使用JavaScript填充选择的选项并删除它们

1 个答案: