-1

人が上位 3 つの設定を表示できるように、3 つのドロップダウン メニュー (アクティビティの選択肢のリスト) を作成しようとしています。2 番目と 3 番目のメニューで、以前に選択した選択肢をオプションとして自動的に削除したいと考えています。3 つの同一のドロップダウン メニューでのみプログラムしました。

<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を使用する必要があると思いますが、どこから始めればよいかわかりません。

4

1 に答える 1

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>

すべてをまとめると、このデモのようなものが得られます。

以前の選択に基づいて選択から特定の項目を削除するには、以下のようなコードを使用できます。

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

もちろん、選択が別のものに変更されたら、それらの値を元に戻すためのロジックが必要になります。

デモ

于 2013-01-17T18:37:27.397 に答える