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

Question

i have a problem with my jQuery script on select tags on my page. I have a select that shows different content according to the selected option. You can run the snippet to understand it...

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

What i want is that when someone select another option in the first select, the third select change automatically to show the right exercises (for the second select option).

Take this example : when you select "Epaules" on the first select, and "Trapèzes" on the second, the third select changes.

But if you change the first select to "Pectoraux", there's just one option in the second select, and the third select doesn't change.

To summarize, the third select will not change if you change the first select, and it had only one option in the second select...

You can select also "Bras" and any options in the second select, and you'll see that the third select changes correctly.

I don't know if I'm clear in my explanations, bug I really hope you guys can help me, because i looked at a lot of topics on StackOverflow, and I found nothing that correspond to my problem.

Thanks a lot, and have a good day! ;)

Answer 1

Referring to the jQuery Form Events - .change():

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

In fact, if there's only one option inside select element, its value is not "changable".

You can add an empty (default) option to the select, or run .trigger('change') method on currently shown element. It will force change event on each select element after .show():

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

The above will run change event on each select element that has been shown. If you want this to happen only when the select target contains single option (or none), you could make an if statement:

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

That way, if the target select element contains single option, the next select will be shown automatically.

---

BTW. use native jQuery .val() method instead of .find('option:selected').attr('value'):

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