MSV MSV - 6 months ago 284
Javascript Question

Show second dropdown based on previous dropdown selection NOT working

I'm sorry to bring this up despite there beeing many post regarding this subject, like:
Show a second dropdown based on previous dropdown selection

Though and after trying loads of stuff stated on those posts, I can't make it work.

ISSUE-The problem is the 3 Select boxes #time, #rental and #place won't show/hide once there's a selection on Select Box #course.

Below the simple code and the related fiddle.

Thanks once again for all your support, regards
Cheers
MSV

https://jsfiddle.net/marcosv/retf6kwu/

<script type="text/javascript">
$(document).ready(function (){
$("#course").change(function() {
$("#fishingoptions").hide();
} if ($(this).val() === "Phase 1") {
$("#time").hide();
$("#rental").hide();
$("#place").hide();
}
else if ($(this).val() === "Phase 2") {
$("#time").hide();
$("#rental").show();
$("#place").show();
}
else if ($(this).val() === "Phase 3") {
$("#time").hide();
$("#rental").show();
$("#place").show();
}
else if ($(this).val() === "Guiding") {
$("#time").show();
$("#rental").show();
$("#place").show();
}
else {
$('#time').show();
$('#rental').show();
$('#place').show();
}
});.trigger('change');
});
</script>

<p>
Select Course <select Name="Course" width="100%" required id="course">
<option value="empty">-</option>
<option value="Guiding">Guiding</option>
<option value="Phase1">Phase 1</option>
<option value="Phase2">Phase 2</option>
<option value="Phase3">Phase 3</option>
</select>
</p>
<div id="fishingoptions">
<div id="time">
<p>
Fishing time? <select Name="Fishing Time" width="100%" required>
<option value="empty">-</option>
<option value="1day">Full day</option>
<option value="1/2day">1/2 day</option>
</select>
</p>
</div>
<div id="rental">
<p>
Equipment rental? <select Name="Equipment Rental" width="100%" required>
<option value="empty">-</option>
<option value="no">no</option>
<option value="yes">yes</option>
</select>
</p>
</div>
<div id="place">
<p>
Where do you want to fish? <select Name="Where to fish" width="100%" required>
<option value="empty">-</option>
<option value="Odeleite River" style="color:green">Odeleite River</option>
<option value="Guadiana River" style="color:green">Guadiana River</option>
<option value="Vascão River" style="color:green">Vascão River</option>
<option value="Odeceixe River" style="color:green">Odeceixe River</option>
<option value="Aljezur River" style="color:green">Aljezur River</option>
<option value="Alvor River" style="color:green">Alvor River</option>
<option value="Arade River" style="color:green">Arade River</option>
<option value="Odeleite Dam" style="color:blue">Odeleite Dam</option>
<option value="Beliche Dam" style="color:blue">Beliche Dam</option>
<option value="Odelouca Dam" style="color:blue">Odelouca Dam</option>
<option value="Funcho/Arade Dam" style="color:blue">Funcho/Arade Dam</option>
<option value="Bravura Dam" style="color:blue">Bravura Dam</option>
<option value="Santa Clara Dam" style="color:blue">Santa Clara Dam</option>
</select>
</p>
</div>
</div>

Answer

It is not clear what you actually need and there are some errors in your code.

For example that .trigger('change'); at the end of your jQuery shouldn't be there.

You are targeting values with Phase 1 while in HTML they are set like Phase1

I changed your code a bit and with this you could get what you need:

    $(document).ready(function() {
      $("#course select").on('change', function() {
        if ($(this).val() === "Phase1") {
          $("#time").hide();
          $("#rental").hide();
          $("#place").hide();
        } else if ($(this).val() === "Phase2") {
        console.log($(this).val());
          $("#time").hide();
          $("#rental").show();
          $("#place").show();
        } else if ($(this).val() === "Phase3") {
          $("#time").hide();
          $("#rental").show();
          $("#place").show();
        } else if ($(this).val() === "Guiding") {
          $("#time").show();
          $("#rental").show();
          $("#place").show();
        } else {
          $('#time').show();
          $('#rental').show();
          $('#place').show();
        }
      });
    });

Full example is here: https://jsfiddle.net/retf6kwu/2/

Comments