jquery - 別のドロップダウン リストからのユーザーの選択に基づいて、複数のドロップダウン リストから複数のオプションを自動的に事前選択する jQuery

Question

次のことを達成する方法を知りたいです。

jQuery、Javascript、または必要に応じて Ajax、PHP、MYSQL を使用します。

別のドロップダウン リストからのユーザー選択に基づいて、複数のドロップダウン リスト オプションを自動的に選択する必要があります。これにより、フォームに入力する時間を大幅に節約できます。

以下は HTML フォーム コードです。混乱を避けるために、ドロップダウン リスト以外の関連のないフォーム要素をすべて削除しました。

具体的には、ユーザーが [位置] ドロップダウン リストからオプションを選択すると、すべての [属性タイプ] ドロップダウン リストが、その特定の位置固有の属性セットで自動的に選択されるようにします。各位置に関連付けられた 8 つの特定の属性があります。

ポジション固有の属性:

• QB - SPD、AGI、INJ、AWR、TPOW、ELUS、TACC、TDEP
• HB - SPD、AGI、ACC、AWR、キャリー、TRCK、ELUS、BCV
• FB - SPD、AGI、AWR、TRCK、CTCH、RBST、RBFT、IMPB
• WR - SPD、AGI、AWR、RRUN、CTCH、CINT、SCAT、RLS
• TE - SPD、AGI、AWR、RRUN、CTCH、CINT、SCAT、RBST
• LT - STR、AWR、PBST、PBFT、RBST、RBFT、IMPB、INJ
• LG - STR、AWR、PBST、PBFT、RBST、RBFT、IMPB、INJ
• C - STR、AWR、PBST、PBFT、RBST、RBFT、IMPB、INJ
• RG - STR、AWR、PBST、PBFT、RBST、RBFT、IMPB、INJ
• RT - STR、AWR、PBST、PBFT、RBST、RBFT、IMPB、INJ
• LE - SPD、AWR、STR、TCKL、PMOV、FMOV、BSHD、PUR
• RE - SPD、AWR、STR、TCKL、PMOV、FMOV、BSHD、PUR
• DT - SPD、AWR、STR、TCKL、PMOV、FMOV、BSHD、PUR
• LOLB - SPD、AGI、AWR、TCKL、BSHD、HP、PREC、PUR
• MLB - SPD、AGI、AWR、TCKL、BSHD、HP、PREC、PUR
• ROLB - SPD、AGI、AWR、TCKL、BSHD、HP、PREC、PUR
• CB - SPD、AGI、AWR、TCKL、MCOV、ZCOV、PRES、PREC
• FS - SPD、AGI、AWR、TCKL、MCOV、ZCOV、PRES、PREC
• SS - SPD、AGI、AWR、TCKL、MCOV、ZCOV、PRES、PREC
• K - AWR、KPOW、KACC
• P - AWR、KPOW、KACC

• HC - MOT、KNO、OFF、DEF、WOR、CHM

  <!-- POSITIONS -->
  <div class="styled">
    <select id="position">
      <option selected disabled>Select Position</option>
      <optgroup label="OFFENSE">
        <option value="QB">QB</option>
        <option value="HB">HB</option>
        <option value="FB">FB</option>
        <option value="WR">WR</option>
        <option value="TE">TE</option>
        <option value="LT">LT</option>
        <option value="LG">LG</option>
        <option value="C">C</option>
        <option value="RG">RG</option>
        <option value="RT">RT</option>
      </optgroup>
      <optgroup label="DEFENSE">
        <option value="LE">LE</option>
        <option value="RE">RE</option>
        <option value="DT">DT</option>
        <option value="LOLB">LOLB</option>
        <option value="MLB">MLB</option>
        <option value="ROLB">ROLB</option>
        <option value="CB">CB</option>
        <option value="FS">FS</option>
        <option value="SS">SS</option>
      </optgroup>
      <optgroup label="SPECIAL TEAMS">
        <option value="K">K</option>
        <option value="P">P</option>
      </optgroup>
      <optgroup label="COACH">
        <option value="HC">HC</option>
      </optgroup>
    </select>
  </div>
  
  <!-- ATTRIBUTES -->
  <div class="styled">
    <select id="attribute_type_1">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  
    <select id="attribute_type_2">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  
    <select id="attribute_type_3">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  
    <select id="attribute_type_4">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  
    <select id="attribute_type_5">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  
    <select id="attribute_type_6">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  
    <select id="attribute_type_7">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  
    <select id="attribute_type_8">
      <option selected disabled>Select Attribute Type</option>
      <option value="SPD">SPD</option>
      <option value="STR">STR</option>
      <option value="AGI">AGI</option>
      <option value="ACC">ACC</option>
      <option value="AWR">AWR</option>
      <option value="TRCK">TRCK</option>
      <option value="ELUS">ELUS</option>
      <option value="BCV">BCV</option>
      <option value="STIF">STIF</option>
      <option value="SMOV">SMOV</option>
      <option value="JMOV">JMOV</option>
      <option value="CARY">CARY</option>
      <option value="CTCH">CTCH</option>
      <option value="RRUN">RRUN</option>
      <option value="CINT">CINT</option>
      <option value="SCAT">SCAT</option>
      <option value="RLS">RLS</option>
      <option value="JUMP">JUMP</option>
      <option value="TPOW">TPOW</option>
      <option value="TACC">TACC</option>
      <option value="TSHT">TSHT</option>
      <option value="TMID">TMID</option>
      <option value="TDEP">TDEP</option>
      <option value="TRUN">TRUN</option>
      <option value="PACT">PACT</option>
      <option value="TCKL">TCKL</option>
      <option value="HP">HP</option>
      <option value="PMOV">PMOV</option>
      <option value="FMOV">FMOV</option>
      <option value="BSHD">BSHD</option>
      <option value="PUR">PUR</option>
      <option value="PREC">PREC</option>
      <option value="MCOV">MCOV</option>
      <option value="ZCOV">ZCOV</option>
      <option value="PRES">PRES</option>
      <option value="RBST">RBST</option>
      <option value="RBFT">RBFT</option>
      <option value="PBST">PBST</option>
      <option value="PBFT">PBFT</option>
      <option value="IMPB">IMPB</option>
      <option value="KPOW">KPOW</option>
      <option value="KACC">KACC</option>
      <option value="STA">STA</option>
      <option value="INJ">INJ</option>
      <option value="MOT">MOT</option>
      <option value="KNO">KNO</option>
      <option value="OFF">OFF</option>
      <option value="DEF">DEF</option>
      <option value="WOR">WOR</option>
      <option value="CHM">CHM</option>
    </select>
  </div>