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

你的标记有很多问题。

你不能在select中包含任何其他元素，所以摆脱换行符。此外，选项不是自动关闭，你不能/>并提供结束标记..这是没有意义的。

所以每一行都应该改变：

<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

内容相关的下拉菜单？（方一）

1 个答案:

内容相关的下拉菜单？ （方一）

1 个答案:

内容相关的下拉菜单？（方一）