使用JavaScript填充選項的選項以及刪除它們

Question

我正在創建一個頁面，允許用戶將玩家分配到職位。我有一系列玩家的名字，以及任何玩家都可以玩的一系列陣地。每個玩家可以在4個季度中的任何一個位置玩任何位置。但是，在同一季度，兩名球員無法發揮相同的位置。


我的問題是，我無法弄清楚如何從選擇選項中刪除一個位置，一旦它被分配給該季度的另一個玩家（並且如果已經選擇然後取消選擇，則將位置添加回列表）。

這是我創建一個表的Javascript。每一行都有一個玩家的名字和4個季度每一個的選擇選項。

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