Question

我的页面上的select标签上的jQuery脚本出现问题。我有一个选择，根据所选的选项显示不同的内容。您可以运行代码段来理解它......

	$('#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”，则第二个选择中只有一个选项，第三个选择不会更改。

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

您也可以选择“Bras”以及第二个选择中的任何选项，您将看到第三个选项正确更改。

我不知道我的解释是否清楚，我真的希望你们可以帮助我，因为我在StackOverflow上查看了很多主题，但没有发现任何与我的问题相符的内容。

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

Answer 1

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

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

事实上，如果select元素中只有一个选项，则其值不是＆＃34; changable＆＃34;。

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

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

jQuery .change（）对select with 1选项没有反应

1 个答案: