0

I have a series of selects and want to change the class on the second select tag when the first select tag has an option selected. (I am using Semantic UI.)

HTML:

<select id="grade" name="grade" class="ui dropdown">
  <option value="">Grade</option>
  <option value="kinder">Kindergarten</option>
  <option value="g1">Grade 1</option>
  <option value="g2">Grade 2</option>
  <option value="g3">Grade 3</option>
  <option value="g4">Grade 4</option>
  <option value="g5">Grade 5</option>
  <option value="g6">Grade 6</option>
  <option value="g7">Grade 7</option>
  <option value="g8">Grade 8</option>
  <option value="g9">Grade 9</option>
  <option value="g10">Grade 10</option>
  <option value="g11">Grade 11</option>
  <option value="g12">Grade 12</option>
</select>

<select id="subject" name="subject" class="ui disabled dropdown">
  <option value="">Subject</option>
  <option value="kinder-esl" class="kinder">ESL</option>
  <option value="kinder-la" class="kinder">LA</option>
  <option value="kinder-health" class="kinder">Health</option>
  <option value="kinder-ict" class="kinder">ICT</option>
  <option value="kinder-math" class="kinder">Math</option>
  <option value="kinder-pe" class="kinder">PE</option>
  <option value="kinder-primary-grades" class="kinder">Primary Grades</option>
  <option value="kinder-science" class="kinder">Science</option>
  <option value="kinder-social-studies" class="kinder">Social Studies</option>
</select>

jQuery:

$(document).ready(function(){
  $('#grade').change(function(){
    $('#subject').removeClass('ui disabled dropdown').addClass('ui dropdown');
  });
});

Here's my Fiddle: https://jsfiddle.net/95p2u8er/

When selecting an option from the 'grade' select tag, the 'subject' select tag is staying disabled. How can I modify my JS to switch the class on the 'subject' select so that it is 'ui dropdown'?

Sheldon Scott
  • 741
  • 1
  • 7
  • 21
  • 1
    You forgot to add `jQuery` in your jsfiddle, it works better with it. Remove part can be simplified to `$('#subject').removeClass('disabled');`. – mx0 Jul 11 '17 at 15:57

4 Answers4

2

Your fiddle didn't include a reference to JQuery.

But, you also have to consider what happens if the first select has a choice (other than Grade) chosen, which will activate the second drop down, but then the first drop down is put back at Grade. That should re-disable the second list.

$(document).ready(function(){
  $('#grade').change(function(){
    // Depending on whether the first select has a valid value
    // either enable the second list or not. It's important to
    // have the else portion because someone could activate the
    // second list and then change the first list back to "Grade"
    // Also, you don't need to be adding back the "dropdown" class
    // because the elements are always dropdowns. You only need to 
    // worry about the "disabled" class
    if(this.value){
      $('#subject').removeClass('disabled');
    } else {
      $('#subject').addClass('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">

<select id="grade" name="grade" class="ui dropdown">
  <option value="">Grade</option>
  <option value="kinder">Kindergarten</option>
  <option value="g1">Grade 1</option>
  <option value="g2">Grade 2</option>
  <option value="g3">Grade 3</option>
  <option value="g4">Grade 4</option>
  <option value="g5">Grade 5</option>
  <option value="g6">Grade 6</option>
  <option value="g7">Grade 7</option>
  <option value="g8">Grade 8</option>
  <option value="g9">Grade 9</option>
  <option value="g10">Grade 10</option>
  <option value="g11">Grade 11</option>
  <option value="g12">Grade 12</option>
</select>

<select id="subject" name="subject" class="ui disabled dropdown">
  <option value="">Subject</option>
  <option value="kinder-esl" class="kinder">ESL</option>
  <option value="kinder-la" class="kinder">LA</option>
  <option value="kinder-health" class="kinder">Health</option>
  <option value="kinder-ict" class="kinder">ICT</option>
  <option value="kinder-math" class="kinder">Math</option>
  <option value="kinder-pe" class="kinder">PE</option>
  <option value="kinder-primary-grades" class="kinder">Primary Grades</option>
  <option value="kinder-science" class="kinder">Science</option>
  <option value="kinder-social-studies" class="kinder">Social Studies</option>
</select>

Also, in the future, please post your code examples right here in Stack Overflow (in a "code snippet" available from the new question toolbar) rather than at a 3rd party location as those links can become broken over time.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
1

Your JS works as written, but you have to enable jQuery in the fiddle. Click the gear icon in the JS panel and select a flavor of jQuery to make it work.

That said, why are you removing all of the classes just to add two back in. you can simply do the following:

$('#subject').removeClass('disabled');

That will just remove the class specified and leave the others

i-man
  • 558
  • 3
  • 14
  • Thanks for adding something useful that I can append to the answer provided by Scott Marcus – Sheldon Scott Jul 11 '17 at 16:04
  • Also you could potentially add onchange listener directly to first select element.. But that's a style preference. https://stackoverflow.com/a/11179421/495157 – JGFMK Jul 11 '17 at 16:20
0

Use the .toggleClass() function.

$('#grade').on("change", function(){
    $('#subject').toggleClass('disabled', $(this).val() === '');
 });

Also, your jsfiddle doesn't have jQuery enabled, maybe that's why ?

notrinsa
  • 11
0

I just updated your fiddle to include jquery, and this worked.

$(document).ready(function(){
alert("ready called");
  $('#grade').change(function(){
    alert("click called");
    $('#subject').removeClass('disabled');
  });
});
Amit Kumar Singh
  • 4,393
  • 2
  • 9
  • 22