I'm very new to jquery/javscript and I'm having trouble with my code.

I've got 2 select options. The first one is enabled while the second one is disabled by default.

I'm trying to make it so that when the first select option is changed, the second select option will be enabled.

CSS

<label class="movie">Movie:</label>
<br>
<select name="movie" id="whichMovie" onchange="changeMovie()">
    <option value="" disabled selected>Please select a movie first</option>
    <option value="AC">Hercule</option>
    <option value="CH">How to Train Your Dragon 2</option>
    <option value="AF">Fearless</option>
    <option value="RC">The Other Woman</option>
</select>
<!--day-->
<br><label>Day:</label>
<br>
<select name="day" value="whichDay" id="whichDay" onclick="changeDay()" disabled>
    <option value="--">--</option>
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
    <option value="thur">Thursday</option>
    <option value="fri">Friday</option>
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
</select>
<br>

JS

 function changeMovie() {
     $('#whichDay').removeAttr('disabled');
 });

Also, how do you rewrite/set new options for the second dropdown based on what option you selected in the first?

e.g. I select 'hercule' under movies, the only days that will show up are mon, tues and wed. Similarly, if I selected 'fearless' it will show up a different set of days.

Thanks in advance!

I'm very new to jquery/javscript and I'm having trouble with my code.

I've got 2 select options. The first one is enabled while the second one is disabled by default.

I'm trying to make it so that when the first select option is changed, the second select option will be enabled.

CSS

<label class="movie">Movie:</label>
<br>
<select name="movie" id="whichMovie" onchange="changeMovie()">
    <option value="" disabled selected>Please select a movie first</option>
    <option value="AC">Hercule</option>
    <option value="CH">How to Train Your Dragon 2</option>
    <option value="AF">Fearless</option>
    <option value="RC">The Other Woman</option>
</select>
<!--day-->
<br><label>Day:</label>
<br>
<select name="day" value="whichDay" id="whichDay" onclick="changeDay()" disabled>
    <option value="--">--</option>
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
    <option value="thur">Thursday</option>
    <option value="fri">Friday</option>
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
</select>
<br>

JS

 function changeMovie() {
     $('#whichDay').removeAttr('disabled');
 });

Also, how do you rewrite/set new options for the second dropdown based on what option you selected in the first?

e.g. I select 'hercule' under movies, the only days that will show up are mon, tues and wed. Similarly, if I selected 'fearless' it will show up a different set of days.

Thanks in advance!

• javascript
• jquery

4 Answers 4

Here you go. You can just write a change event to select element and based on the value selected you can append the necessary options to the whichDay select element as below:

$("#whichMovie").change(function () {
        var val = $(this).val(); //get the value
        $("#whichDay").attr('disabled',false);
        if (val == "AC") { //if Hercules append only necessary options
            $("#whichDay").html("<option value='mon'>Monday</option><option value='tue'> Tuesday</option><option value='wed'>Wednesday</option>");
        } else if (val == "CH") {
            $("#whichDay").html("<option value='thur'>Thursday</option><option value='fri'> Friday</option><option value='sat'>Saturday</option>");
        } else if (val == "AF") {
            $("#whichDay").html("<option value='sun'>Sunday</option><option value='tue'>Tuesday");
        }
        else
        {
          $("#whichDay").html("<option value='fri'>Friday</option><option value='mon'>Monday");
        }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="movie">Movie:</label>
<br>
<select name="movie" id="whichMovie">
    <option value="" disabled selected>Please select a movie first</option>
    <option value="AC">Hercule</option>
    <option value="CH">How to Train Your Dragon 2</option>
    <option value="AF">Fearless</option>
    <option value="RC">The Other Woman</option>
</select>
<!--day-->
<br><label>Day:</label>
<br>
<select name="day" value="whichDay" id="whichDay" onclick="changeDay()" disabled>
    <option value="--">--</option>
    
</select>
<br>

You can do it like below. :

$(document).ready(function(){
  $("#whichMovie").change(function(){
   if($(this).val()!="")
   {
     $("#whichDay").removeAttr("disabled");
   }     
  });
});

FIDDLE DEMO

Here is a possible solution:

$('#whichMovie').on('change', function(){
  
  var whichDayDdl = $('#whichDay');

  whichDayDdl.prop('disabled', true);

  if ($(this).val() != '')
    {
      whichDayDdl.prop('disabled', false);
    }
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="movie">Movie:</label>
<br>
<select name="movie" id="whichMovie" onchange="changeMovie()">
    <option value="" disabled selected>Please select a movie first</option>
    <option value="AC">Hercule</option>
    <option value="CH">How to Train Your Dragon 2</option>
    <option value="AF">Fearless</option>
    <option value="RC">The Other Woman</option>
</select>
<!--day-->
<br><label>Day:</label>
<br>
<select name="day" value="whichDay" id="whichDay" onclick="changeDay()" disabled>
    <option value="--">--</option>
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
    <option value="thur">Thursday</option>
    <option value="fri">Friday</option>
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
</select>
<br>

Your code is right small mistake in changeMovie(). This method is javascript method so remove ); after } of method like below:

function changeMovie() {
     $('#whichDay').removeAttr('disabled');
 }