jQuery .change() 对带有 1 个选项的选择没有反应答案

【问题标题】：jQuery .change() doesn't react on select with 1 optionjQuery .change() 对带有 1 个选项的选择没有反应
【发布时间】：2015-05-01 02:29:00
【问题描述】：

我的页面上选择标签上的 jQuery 脚本有问题。我有一个根据所选选项显示不同内容的选择。你可以运行sn -p来理解它...

	$('#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>

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

以这个例子为例：当您在第一个选择中选择“Epaules”，在第二个选择中选择“Trapèzes”时，第三个选择会发生变化。

但是如果你将第一个选择更改为“Pectoraux”，第二个选择中只有一个选项，第三个选择不会改变。

总而言之，如果你改变了第一个选择，第三个选择不会改变，它在第二个选择中只有一个选项......

您还可以在第二个选择中选择“胸罩”和任何选项，您会看到第三个选择正确更改。

我不知道我的解释是否清楚，bug 我真的希望你们能帮助我，因为我在 StackOverflow 上查看了很多主题，但我没有找到与我的问题相对应的内容。

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

【问题讨论】：

标签： javascript jquery html select onchange

【解决方案1】：

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

change 事件在元素值改变时发送给元素。

事实上，如果 select 元素中只有一个选项，那么它的值就不是“可变的”。

您可以为选择添加一个空（默认）选项，或在当前显示的元素上运行.trigger('change') 方法。它将在.show() 之后的每个select 元素上强制change 事件：

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

上面将在每个已显示的select元素上运行更改事件。如果您希望仅在 select 目标包含单个选项（或没有）时发生这种情况，您可以编写 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');
}

【讨论】：