內容相關下拉菜單？ （廣場之一）

Question

我正在嘗試創建三個下拉菜單（活動選項列表），以便一個人顯示前三個首選項。我希望第二個和第三個菜單自動刪除之前選擇的選項作爲選項。我只在三個相同的下拉菜單中編程：

<div id="satellites"> 
<p><b>Satellite Choices</b><br /> 
List your first, second, and third choices. You will be given your first choice if it is not full. ALL events have limited capacity. If you do not choose a satellite, one will be assigned for you.<br /> 
<label>First Choice*: </label><select name="satellite1 id="firstchoice" required="required""><br /> 
<option value="art"/>Art</option><br /> 
<option value="basketball"/>Basketball</option><br /> 
<option value="dance"/>Dance</option><br /> 
<option value="drama"/>Drama</option><br /> 
<option value="missions"/>Missions</option><br /> 
<option value="photo1"/>Beginning Photography</option><br /> 
<option value="photo2"/>Advanced Photography</option><br /> 
<option value="rock_climbing"/>Rock Climbing</option><br /> 
<option value="scrap-booking"/>Scrap-Booking</option><br /> 
<option value="sgjr"/>Summer Games Jr. Training</option><br /> 
<option value="soccer"/>Soccer</option><br /> 
<option value="technology"/>Technology</option><br /> 
<option value="ultimate"/>Ultimate Frisbee</option><br /> 
<option value="video_games"/>Video Games</option><br /> 
<option value="volleyball"/>Volleyball</option><br /> 
<option value="water_park"/>Water Park</option><br /> 
</select><br /><br /> 


<label>Second Choice*: </label><select name="satellite2" id="secondchoice" required="required"><br /> 
<option value="art"/>Art</option><br /> 
<option value="basketball"/>Basketball</option><br /> 
<option value="dance"/>Dance</option><br /> 
<option value="drama"/>Drama</option><br /> 
<option value="missions"/>Missions</option><br /> 
<option value="photo1"/>Beginning Photography</option><br /> 
<option value="photo2"/>Advanced Photography</option><br /> 
<option value="rock_climbing"/>Rock Climbing</option><br /> 
<option value="scrap-booking"/>Scrap-Booking</option><br /> 
<option value="sgjr"/>Summer Games Jr. Training</option><br /> 
<option value="soccer"/>Soccer</option><br /> 
<option value="technology"/>Technology</option><br /> 
<option value="ultimate"/>Ultimate Frisbee</option><br /> 
<option value="video_games"/>Video Games</option><br /> 
<option value="volleyball"/>Volleyball</option><br /> 
<option value="water_park"/>Water Park</option><br /> 
</select><br /><br /> 



<label>Third Choice*: </label><select name="satellite3" id="thirdchoice" required="required"><br /> 
<option value="art"/>Art</option><br /> 
<option value="basketball"/>Basketball</option><br /> 
<option value="dance"/>Dance</option><br /> 
<option value="drama"/>Drama</option><br /> 
<option value="missions"/>Missions</option><br /> 
<option value="photo1"/>Beginning Photography</option><br /> 
<option value="photo2"/>Advanced Photography</option><br /> 
<option value="rock_climbing"/>Rock Climbing</option><br /> 
<option value="scrap-booking"/>Scrap-Booking</option><br /> 
<option value="sgjr"/>Summer Games Jr. Training</option><br /> 
<option value="soccer"/>Soccer</option><br /> 
<option value="technology"/>Technology</option><br /> 
<option value="ultimate"/>Ultimate Frisbee</option><br /> 
<option value="video_games"/>Video Games</option><br /> 
<option value="volleyball"/>Volleyball</option><br /> 
option value="water_park"/>Water Park</option><br /> 
</select><br /><br /> 

</div> 

我該怎麼辦呢？我假設我需要使用JavaScript，但我不知道從哪裏開始。

Answer 1

你的標記有很多錯誤。

你不能在選擇內部有任何其他元素，所以擺脫換行符。此外，選項不是自動關閉，你不能做/>並提供結束標記..這是沒有意義的。

所以每行應該改變來自：

<option value="art"/>Art</option><br /> 

到：

<option value="art">Art</option> 

您還可以在第一個不匹配的報價選擇：

<select name="satellite1 id="firstchoice" required="required""><br /> 

應該

<select name="satellite1" id="firstchoice" required="required"> 

通過Markup Validator運行您的標記來捕獲這些東西。

---

要清除基礎上的第一個其他選擇，你可以綁定到其onchange事件。

<select name="satellite1" id="firstchoice" required="required" onchange="clearOthers()"> 

然後在clearothers()你自己選擇的selectedIndex設置爲默認值：

function clearOthers() { 
    document.getElementById("secondchoice").options.selectedIndex=0; 
    document.getElementById("thirdchoice").options.selectedIndex=0; 
} 

我還要補充禁用 「選擇一個選項」 選項，每個：

<option value="" disabled>Select</option> 

認沽這一切，你會得到像this demo。

---

要選擇基於先前的選擇，你可以使用類似的代碼下面移除特定項目：

function clearOthers() { 
    var sel1 = document.getElementById("firstchoice"); 
    var sel2 = document.getElementById("secondchoice"); 
    var sel3 = document.getElementById("thirdchoice"); 

    sel2.options.selectedIndex=0; 
    sel3.options.selectedIndex=0; 

    removeOption(sel2, sel1.value); 
    removeOption(sel3, sel1.value); 
} 

function removeOption (sel, val) { 
    // Iterate over select and find matching value 
    for (i = 0; i < sel.length; i++) { 
    if (sel.options[i].value == val) { 
     // remove that index 
     sel.remove(i); 
     return; 
    } 
    } 
} 

當然，你需要一些邏輯，以將這些值回一次選擇改變別的東西。

Demo