Displaying text with JavaScript from multiple conditions in form

Question

In this question I would like to display some HTML text depending on a which combination of options is selected in a form. In this example for instance, I want to display some text if spelling is selected as a subcategory and 'greater-depth' (equivalent to an 'A' grade) is selected as the performance grade. I've developed this in Rails form_for but have shown the form as rendered in the browser.

<form class="new_english_grade" id="new_english_grade" action="/english_grades" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="VTtOS/86shuyQPW6/HfaduffmQiVXLiJb06IQp7+56LM8cD8KRnD3qLGbQBit4OuAIc92MYbFpPObR6ePYmY1g==" />

      <div class="field">
        <label for="english_grade_subcategory">Subcategory</label>
        <select name="english_grade[subcategory]" id="english_grade_subcategory"><option value="Spelling">Spelling</option>
    <option value="Reading">Reading</option>
    <option value="Writing">Writing</option></select>
      </div>

      <div class="field">
        <label for="english_grade_performance_grade">Performance grade</label>
        <select name="english_grade[performance_grade]" id="english_grade_performance_grade"><option value="Not-started">Not-started</option>
    <option value="Working-towards">Working-towards</option>
    <option value="Working-at">Working-at</option>
        <option value="Greater-depth">Greater-depth</option></select>
      </div>
</form>

The text I'd like to display for instance is like:

<div id = "spelling_greater_depth">
  This text is displayed only if 'spelling' and 'greater-depth' are selected in options
</div>

I have initially set my CSS to be:

#spelling_greater_depth
{
  display: none;
}

My JavaScript is not really working yet so I have not included it but I was trying to implement it using this:

Answer 1

I think this might be enough to get you started https://jsfiddle.net/sxh0n7d1/37/

However it is very difficult to answer the question, can you clarify your question or give feedback to this answer if it is close?

 $('select[name="english_grade"]').change(function () {
  $('#spelling_working_at').css("display","none");
  console.log($(this).val());
  var fieldToShow = $(this).val();
  $("#" + fieldToShow).css("display","block");
});