Javascriptドロップダウンリストで無効にするオプション

Question

会議の登録ページに複数のドロップダウンリストがあります。ゲストは、1回目と2回目の午後のアクティビティを選択することになっています。そのため、ゲストがFirst Choiceドロップダウンメニューで "Leisure time"を選択した場合、Second Choiceドロップダウンメニューで "Leisure Time"を無効にする必要があります。

私はその部分を働かせました。ゲストがFirst Choiceメニューから最初に選択すると、Second Choiceメニューで適切なオプションが無効になります。

しかし、ゲストがSecond Choiceメニューから最初に選択した場合、私は解決策を見つけることができませんでした。その場合、First Choiceメニューから何かを選択することができ、何も無効にはなりません。ここに私の機能は次のとおりです。

function checkSelects(select1Id, select2Id) { 
    var select1 = document.getElementById(select1Id); 
    var select2 = document.getElementById(select2Id); 


    if (select1.value) { 
     for (var i = 0; i < select2.options.length; i++) { 
      var currentOption = select2.options[i]; 

      if (select1.value === currentOption.value) { 
       currentOption.disabled = true; 
      } else { 
       currentOption.disabled = false; 
      } 
     } 
    } 
} 

ドロップダウンリストのオプションが設定されている方法の例：助けを

<p> 
    Sunday - First Choice<span class="required">*</span> 
</p> 
<div class="dropdown"> 
    <select id="selectOne" onchange="javascript:checkSelects('selectOne', 'selectTwo')"> 
     <option></option> 
     <option name="ActivitySunday1" id="ActSun1_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday1" id="ActSun1_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday1" id="ActSun1_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday1" id="ActSun1_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun1Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 
<p> Sunday - Second Choice<span class="required">*</span></p> 
<div class="dropdown"> 
    <select id="selectTwo" onchange="javascript:checkSelects('selectOne', 'selectTwo')"> 
     <option></option> 
     <option name="ActivitySunday2" id="ActSun2_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday2" id="ActSun2_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday2" id="ActSun2_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday2" id="ActSun2_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun2Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 

ありがとう！

Answer 1

今、私は理解していると信じています。これは実際にあなたのHTMLに最小限の変更を加えることで解決できます。 2回目の選択のためにonchangeイベントで送信するパラメータを逆にして、元のjavascriptを使用することができます。

<p> 
    Sunday - First Choice<span class="required">*</span> 
</p> 
<div class="dropdown"> 
    <select id="selectOne" onchange="javascript:checkSelects('selectOne', 'selectTwo')"> 
     <option></option> 
     <option name="ActivitySunday1" id="ActSun1_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday1" id="ActSun1_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday1" id="ActSun1_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday1" id="ActSun1_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun1Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 
<p> Sunday - Second Choice<span class="required">*</span></p> 
<div class="dropdown"> 
    <select id="selectTwo" onchange="javascript:checkSelects('selectTwo', 'selectOne')"> 
     <option></option> 
     <option name="ActivitySunday2" id="ActSun2_Leisure" value="Leisure">Leisure Time</option> 
     <option name="ActivitySunday2" id="ActSun2_Duck" value="Duck and Fenway Tour">Boston Duck and Fenway Tour</option> 
     <option name="ActivitySunday2" id="ActSun2_Revealed" value="Boston Revealed">Boston Revealed</option> 
     <option name="ActivitySunday2" id="ActSun2_Cambridge" value="Cambridge and Harvard Tour">Cambridge and Harvard Tour</option> 
    </select> 
</div> 
<div id="actsun2Error" class="error" style="display: none;"> 
    Please select your Second choice of an afternoon activity for Sunday April 24th. 
</div> 

わかりやすくするために、あなたのJSで変数の名前を変更することもできます。

function checkSelects(sourceSelectId, targetSelectId) { 
    var sourceSelect = document.getElementById(sourceSelectId); 
    var targetSelect = document.getElementById(targetSelectId); 


    if (sourceSelect.value) { 
     for (var i = 0; i < targetSelect.options.length; i++) { 
      var currentOption = targetSelect.options[i]; 

      if (sourceSelect.value === currentOption.value) { 
       currentOption.disabled = true; 
      } 
      else { 
       currentOption.disabled = false; 
      } 
     } 
    } 
}