Javascript 内容相关下拉菜单？（第一格）

我正在尝试创建三个下拉菜单（活动选项列表），供一个人显示前三个首选项。我想让第二和第三个菜单自动删除以前选择的选项作为选项。我只在三个相同的下拉菜单中编程：

<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，但我不知道从哪里开始。

您的标记有很多错误

在select中不能有任何其他元素，因此请去掉换行符。此外，该选项不是自动关闭，您不能执行

/>

并提供关闭标记。。这毫无意义

因此，每一行应该从：

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

然后在

clearothers（）

中，将其选项的selectedIndex设置为默认值：

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

我还将为每个选项添加一个禁用的“选择选项”选项：

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

选择

把它们放在一起，你会得到这样的结果

---

要从基于先前选择的选择中删除特定项目，可以使用类似于以下代码的代码：

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;
    }
  }
}

函数clearOthers（）{
var sel1=document.getElementById（“第一选择”）；
var sel2=document.getElementById（“第二选择”）；
var sel3=document.getElementById（“第三选择”）；
sel2.options.selectedIndex=0；
sel3.options.selectedIndex=0；
removeOption（sel2，sel1.值）；
removeOption（sel3，sel1.值）；
}
功能移除选项（sel，val）{
//迭代选择并查找匹配值
对于（i=0；i

当然，一旦选择更改为其他内容，您需要一些逻辑来恢复这些值

---

我想我们需要更清楚、更具体的问题。你可以使用css和html来解决这个问题！在不知道您希望实现什么的情况下查看此项，您的代码中有一些错误->

name=“satellite1 id=“firstchoice”

请使用

“

关闭

name

属性，并且请不要在选择框中使用换行符（

）！我认为这很接近，但我仍然看到所有的选择。例如，如果我在第一个下拉列表中选择了艺术，我希望在第二个和第三个下拉列表中隐藏/删除艺术，如果在第二个下拉列表中选择了basketball，则它也将从第三个下拉列表中删除。在我的答案中添加了另一个部分

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

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

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

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;
    }
  }
}