jQuery .change() 对 select 没有反应，有 1 个选项

Question

我的 jQuery 脚本在我页面上的 select 标签上有问题。我有一个 select 根据 selected 选项显示不同的内容。您可以运行片段来理解它...

 $('#gpm2, #gpm3, #gpm4, #gpm5, #gpm6').hide();
 $('#gpm').change(function() {
  $('#gpm1, #gpm2, #gpm3, #gpm4, #gpm5, #gpm6').hide();
  $('#gpm' + $(this).find('option:selected').attr('value')).show();
 });

 $('#exo_muscle_2, #exo_muscle_3, #exo_muscle_4, #exo_muscle_5, #exo_muscle_6, #exo_muscle_7, #exo_muscle_8, #exo_muscle_9, #exo_muscle_10, #exo_muscle_11, #exo_muscle_12, #exo_muscle_13').hide();
 
 $(function() {
  $('#gpm1, #gpm2, #gpm3, #gpm4, #gpm5, #gpm6').change(function() {
   $('#exo_muscle_1, #exo_muscle_2, #exo_muscle_3, #exo_muscle_4, #exo_muscle_5, #exo_muscle_6, #exo_muscle_7, #exo_muscle_8, #exo_muscle_9, #exo_muscle_10, #exo_muscle_11, #exo_muscle_12, #exo_muscle_13').hide();
   $('#exo_muscle_' + $(this).find('option:selected').attr('value')).show();
   console.log($(this).find('option:selected').attr('value'));
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>Select an exercise...</h1>
<select id="gpm" class="form-control" name="gpmlist">
<option value="1">Epaules</option>
<option value="2">Pectoraux</option>
<option value="3">Dorsaux</option>
<option value="4">Bras</option>
<option value="5">Jambes</option>
<option value="6">Abdominaux</option>
</select>
<select id="gpm1" class="form-control" style="display: inline-block;">
<option value="1">Deltoides</option>
<option value="2">Trapezes</option>
</select>
<select id="gpm2" class="form-control" style="display: none;">
<option value="3">Pectoraux</option>
</select>
<select id="gpm3" class="form-control" style="display: none;">
<option value="4">Dorsaux</option>
</select>
<select id="gpm4" class="form-control" style="display: none;">
<option value="5">Avant bras</option>
<option value="6">Biceps</option>
<option value="7">Triceps</option>
</select>
<select id="gpm5" class="form-control" style="display: none;">
<option value="8">Quadriceps</option>
<option value="9">Mollets</option>
<option value="10">Ischios-jambiers</option>
<option value="11">Adducteurs</option>
<option value="12">Fessiers</option>
</select>
<select id="gpm6" class="form-control" style="display: none;">
<option value="13">Abdominaux</option>
</select>
<select id="exo_muscle_1" class="form-control" style="display: none;">
<option value="1">Développé assis</option>
<option value="2">Développé avant</option>
<option value="3">Elévation latérale inclinée</option>
<option value="4">Elévation latérale large</option>
<option value="5">Elévation latérale à la poulie</option>
<option value="6">Développé avant assis</option>
<option value="7">Relevé d'épaule</option>
<option value="8">Tirage vertical</option>
<option value="9">Développé nuque</option>
<option value="10">Développé droit en pronation</option>
<option value="11">Tirage barre en pronation</option>
<option value="12">Tirage avec haltères</option>
</select>
<select id="exo_muscle_2" class="form-control" style="display: none;">
<option value="17">Développé nuque</option>
<option value="18">Relevé d'épaules</option>
<option value="19">Haussement d'épaules droit</option>
<option value="20">Haussement d'épaules en rotation</option>
</select>
<select id="exo_muscle_3" class="form-control" style="display: none;">
<option value="21">Développé couché classique</option>
<option value="22">Développé couché avec haltères</option>
<option value="23">Développé couché prise large</option>
<option value="24">Développé couché avec haltères prise marteau</option>
<option value="25">Développé couché prise serrée</option>
<option value="26">Développé couché décliné à la barre</option>
<option value="27">Développé couché aux haltères</option>
<option value="28">Développé couché aux haltères prise marteau</option>
<option value="29">Développé couché incliné classique</option>
<option value="30">Développé couché incliné aux haltères prise marteau</option>
<option value="31">Développé couché incliné avec haltères</option>
<option value="32">Développé couché incliné prise large</option>
<option value="33">Développé couché incliné prise serrée</option>
<option value="34">Écarté couché</option>
<option value="35">Écarté décliné </option>
<option value="36">Écarté incliné</option>
<option value="37">Développé avant prise étroite</option>
<option value="38">Développé droit à la machine</option>
<option value="39">Écarté à la poulie</option>
<option value="40">Pull-over</option>
<option value="41">Répulsion triceps</option>
<option value="42">Pull-over avec barre</option>
<option value="43">Écarté alterné à la poulie</option>
<option value="44">Écarté la machine (butterfly)</option>
<option value="45">Répulsion à la chaise Romaine (Dips)</option>
</select>
<select id="exo_muscle_4" class="form-control" style="display: none;">
<option value="46">Pull-over</option>
<option value="47">Tirage bras tendus</option>
<option value="48">Pull-over avec barre</option>
<option value="49">Tirage avec haltères</option>
<option value="50">Tirage de barre en pronation</option>
<option value="51">Tirage nuque prise large</option>
<option value="52">Tirage poulie bras serrés</option>
<option value="53">Traction nuque à la barre fixe</option>
<option value="54">Traction à la barre fixe supination</option>
<option value="55">Tirage poitrine prise large</option>
<option value="56">Tirage poitrine</option>
<option value="57">Traction à la barre fixe prise large</option>
<option value="58">Tirage poitrine prise courte</option>
</select>
<select id="exo_muscle_5" class="form-control" style="display: inline-block;">
<option value="59">Flexion prise marteau alternée</option>
<option value="60">Flexion des poignets</option>
<option value="61">Flexion biceps assis prise marteau</option>
<option value="62">Flexion des poignets en supination</option>
<option value="63">Flexion biceps en pronation</option>
<option value="64">Traction barre fixe en supination</option>
</select>
<select id="exo_muscle_6" class="form-control" style="display: none;">
<option value="65">Curl assis</option>
<option value="66">Tirage haltère au sol</option>
<option value="67">Curl assis alterné</option>
<option value="68">Tirage nuque prise large</option>
<option value="69">Curl concentré</option>
<option value="70">Traction à la barre fixe</option>
<option value="71">Curl bras écartés</option>
<option value="72">Traction nuque à la barre fixe (supination)</option>
<option value="73">Curl bras serrés</option>
<option value="74">Curl en pronation</option>
<option value="75">Curl debout</option>
<option value="76">Curl prise marteau alternée</option>
<option value="77">Curl debout alterné</option>
<option value="78">Curl barre EZ prise large</option>
<option value="79">Curl barre EZ prise serrée</option>
<option value="80">Tirage horizontal serré à la poulie basse</option>
</select>
<select id="exo_muscle_7" class="form-control" style="display: none;">
<option value="81">Développé couché classique</option>
<option value="82">Développé couché avec haltères</option>
<option value="83">Développé couché prise large</option>
<option value="84">Développé couché avec haltères prise marteau</option>
<option value="85">Développé couché prise serrée</option>
<option value="86">Développé couché décliné à la barre</option>
<option value="87">Développé couché aux haltères</option>
<option value="88">Développé couché aux haltères prise marteau</option>
<option value="89">Développé couché incliné classique</option>
<option value="90">Développé couché incliné aux haltères prise marteau</option>
<option value="91">Développé couché incliné avec haltères</option>
<option value="92">Développé couché incliné prise large</option>
<option value="93">Développé couché incliné prise serrée</option>
<option value="94">Écarté couché</option>
<option value="95">Écarté décliné </option>
<option value="96">Écarté incliné</option>
<option value="97">Développé avant prise étroite</option>
<option value="98">Développé droit à la machine</option>
<option value="99">Écarté à la poulie</option>
<option value="100">Pull-over</option>
<option value="101">Répulsion triceps</option>
<option value="102">Pull-over avec barre</option>
<option value="103">Écarté alterné à la poulie</option>
<option value="104">Écarté la machine (butterfly)</option>
<option value="105">Répulsion à la chaise Romaine (Dips)</option>
<option value="106">Extension verticale avec haltères</option>
<option value="107">Extension triceps à deux mains</option>
<option value="108">Extension à la poulie en pronation</option>
<option value="109">Extension à la poulie en supination</option>
<option value="110">Extension alternée avec haltères</option>
<option value="111">Extension à la poulie bras levés</option>
<option value="112">Extension triceps allongé</option>
<option value="113">Tirage bras tendus</option>
</select>
<select id="exo_muscle_8" class="form-control" style="display: none;"></select>
<select id="exo_muscle_9" class="form-control" style="display: none;"></select>
<select id="exo_muscle_10" class="form-control" style="display: none;"></select>
<select id="exo_muscle_11" class="form-control" style="display: none;"></select>
<select id="exo_muscle_12" class="form-control" style="display: none;"></select>
<select id="exo_muscle_13" class="form-control" style="display: none;"></select>

我想要的是，当某人 select 第一个 select 中的另一个选项时，第三个 select 会自动更改以显示正确的练习（对于第二个 select 选项）。

举个例子：当你在第一个 select select "Epaules" 和第二个 "Trapèzes" 时，第三个 select 发生变化。

但是如果把第一个select改成"Pectoraux"，第二个select只有一个选项，第三个select没有变化。

总而言之，如果您更改第一个 select，第三个 select 将不会更改，并且在第二个 select 中只有一个选项...

您可以 select 也可以 "Bras" 和第二个 select 中的任何选项，您会看到第三个 select 正确更改。

不知道我的解释是否清楚，bug 真的希望大家能帮帮我，因为我在Whosebug上看了很多话题，没有找到符合我问题的。

非常感谢，祝你有美好的一天！ ;)

Answer 1

参考 jQuery 表单事件 - .change():

The change event is sent to an element when its value changes.

其实如果select元素里面只有一个选项，它的值就不是"changable".

您可以在 select 或运行 .trigger('change') 方法中为当前显示的元素添加一个空（默认）选项。它将在 .show():

之后的每个 select 元素上强制执行 change 事件

$('#gpm' + $(this).find('option:selected').attr('value')).show().trigger('change');

以上将运行更改已显示的每个 select 元素上的事件。如果您希望仅当 select 目标包含单个选项（或 none）时发生这种情况，您可以创建一个 if 语句：

var select = $('#gpm' + $(this).find('option:selected').attr('value')).show();
if(select.find('option').length <= 1){
    select.trigger('change');
}

这样，如果目标 select 元素包含单个选项，下一个 select 将自动显示。

顺便说一句。使用本机 jQuery .val() 方法而不是 .find('option:selected').attr('value'):

var select = $('#gpm' + $(this).val()).show();
if(select.find('option').length <= 1){
    select.trigger('change');
}

jQuery .change() 对 select 没有反应，有 1 个选项

jQuery .change() doesn't react on select with 1 option

html

javascript

jquery

select

onchange