CODEWITHSUNDEEP
javascriptjquery
antonlab
antonlab

Reputation: 343

Enabling a disabled select option via onchange?

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!

Upvotes: 1

Views: 7779

Answers (4)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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.com/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>

Upvotes: 3

Pawan
Pawan

Reputation: 1744

You can do it like below. :

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

FIDDLE DEMO

Upvotes: 2

Bhuwan Prasad Upadhyay
Bhuwan Prasad Upadhyay

Reputation: 3056

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

Upvotes: 0

JGV
JGV

Reputation: 5187

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.com/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>

Upvotes: 0

Related Questions