jquery - jQuery 根据用户从另一个下拉列表中的选择自动从多个下拉列表中预选多个选项

Question

我想知道如何完成以下任务：

如果需要，使用 jQuery、Javascript 或另外的 Ajax、PHP、MYSQL。

我需要根据用户从另一个下拉列表中的选择自动选择多个下拉列表选项。这将在填写表格时节省大量时间。

下面是 HTML 表单代码，为了避免混淆，我已经删除了除了我正在谈论的下拉列表之外的所有不相关的表单元素。

具体来说，当用户从“位置”下拉列表中选择一个选项时，我希望所有“属性类型”下拉列表都自动选择该特定位置的特定属性集。每个职位有 8 个特定属性。

职位特定属性：

• QB - SPD、AGI、INJ、AWR、TPOW、ELUS、TACC、TDEP
• HB - SPD、AGI、ACC、AWR、CARY、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>
  

Answer 1

想到的最简单的方法如下：

var positions = {
    QB : ['SPD', 'AGI', 'INJ', 'AWR', 'TPOW', 'ELUS', 'TACC', 'TDEP'],
    HB : ['SPD', 'AGI', 'ACC', 'AWR', 'CARY', 'TRCK', 'ELUS', 'BCV'],
    FB : ['SPD', 'AGI', 'AWR', 'TRCK', 'CTCH', 'RBST', 'RBFT', 'IMPB']
    // fill in the rest of this object yourself
}

$('#position').change(function(){
        // caching the selected value:
    var v = this.value,
        // retrieving the array stored under the relevant key:
        arr = positions[v],
        // getting all the select elements whose 'id' starts with the string:
        attribs = $('select[id^="attribute_type_"]');
    // iterating each of those selects:
    $.each(attribs, function(i,v){
        /* finding the 'option' whose value is equal to that stored in the array
           at the index point, and setting that to be selected: */
        $(v).find('option[value="' + arr[i] + '"]').prop('selected', true);
    });
});

JS 小提琴演示。

请注意，在上面的演示中似乎有一个错字，因为attribute_type_7没有选择带有 id 的元素option（根据您提供的数据应该是“TACC”，但是有一个“KACC”，所以，错字？ ）。

以上修改为使用each()而不是jQuery.each()（或$.each()）：

$('#position').change(function(){
    var v = this.value,
        arr = positions[v];
    $('select[id^="attribute_type_"]').each(function(i){
        $(this).find('option[value="' + arr[i] + '"]').prop('selected',true);
    });
});

JS 小提琴演示。

参考：

• 属性等于 ( [attribute="value"]) 选择器。
• 属性开始与 ( [attribute^="value"]) 选择器。
• change().
• each().
• find().
• jQuery.each().
• prop().