在其他選擇的基礎上使用Javascript更改選擇標記

Question

我不確定我要做什麼是可行的，但我會嘗試解釋它，也許我們可以找到與它接近的東西。

我在HTML表單（> 10）中有許多選擇標記，它們的選項完全相同。選項的數量也很高（> 20）。

下面是一個例子

<select> 
<option>A1</option> 
<option>A2</option> 
<option>A3</option> 
<option>A4</option> 
<option>B1</option> 
<option>B2</option> 
<option>B3</option> 
...... 
</select> 

我想創建幾個「如果那麼」案件。

• 更簡單的是「如果用戶選擇一個選項」，則該選項將從所有其他選擇標籤中移除。
• 另一個是如果有人在兩個不同的選擇標籤中選擇了同一個「團隊」（例如[A1，A2，A3]）的2個選項，那麼第三個選項也會從其他選項中刪除。

我相信我可以用許多許多if語句來做到這一點，但我想的是更簡單的事情。

例如，我可以創建4-5列出與「團隊」，改變了案件：

• 如果在列表中選擇，然後從所有其他選項刪除
• 如果2或3個選擇（基於團隊），然後從其他選擇中刪除該團隊中的所有其他人。

如果您認爲除了下拉菜單還有其他方法可以做到這一點，我可以改變它，如果它是一個更好的選擇。

編輯：如果有人想添加獎勵（50分）來吸引更多的答案，請隨時做。我沒有足夠的聲望去做。

Answer 1

這是jQuery的一個例子。

HTML

<select> 
    <option class="A" value="A1">A1</option> 
    <option class="A" value="A2">A2</option> 
    <option class="A" value="A3">A3</option> 
    <option class="A" value="A4">A4</option> 
    <option class="B" value="B1">B1</option> 
    <option class="B" value="B2">B2</option> 
    <option class="B" value="B3">B3</option> 
</select> 
<select> 
    <option class="A" value="A1">A1</option> 
    <option class="A" value="A2">A2</option> 
    <option class="A" value="A3">A3</option> 
    <option class="A" value="A4">A4</option> 
    <option class="B" value="B1">B1</option> 
    <option class="B" value="B2">B2</option> 
    <option class="B" value="B3">B3</option> 
</select> 
<select> 
    <option class="A" value="A1">A1</option> 
    <option class="A" value="A2">A2</option> 
    <option class="A" value="A3">A3</option> 
    <option class="A" value="A4">A4</option> 
    <option class="B" value="B1">B1</option> 
    <option class="B" value="B2">B2</option> 
    <option class="B" value="B3">B3</option> 
</select> 

的JavaScript

var teams_counter = {}; 
var prev_value, prev_team; 

$("select").each(function(i,sel){ 
    sel.selectedIndex = -1; 
    $(sel).children().each(function(j,opt){ 
     teams_counter[opt.className] = 0; 
    }); 
}); 

$("select").focus(function(evt){ 
    prev_value = evt.target.value; 
    var opt = evt.target.selectedOptions[0]; 
    prev_team = opt ? opt.className : undefined; 
}); 

$("select").change(function(evt){ 
    var sel_team = evt.target.selectedOptions[0].className; 
    teams_counter[sel_team] += 1; 
    if(teams_counter[sel_team] >= 2){ 
     //$("." + sel_team).hide(); // this is not good. 
     $("select").filter(function(){ 
      return !this.selectedOptions[0] || this.selectedOptions[0].className != sel_team; 
     }).find("." + sel_team).hide(); 
    }; 
    if(prev_team){ 
     teams_counter[prev_team] -= 1; 
     if(teams_counter[prev_team] < 2){ 
      $("." + prev_team).show(); 
     } 
    } 
    $("option[value='" + evt.target.value + "']").hide(); 
    $("option[value='" + prev_value + "']").show(); 
});