show and hide div depending upon selected checkbox with combobox option

问题

I have used this multiselect checkbox with a combobox option..

JsFiddle

In my jsfiddle that checkbox with a combobox type will not work. I have too many codes. So, I didn't included. See this link for full codes I'm trying to show and hide the div content depending upon selected checkbox. it does not work. I tried this code separately (without a combobox checkbox only). it works. I have problem with checkbox with a combobox type. How do I show/hide div content based upon selected checkbox with combobox option?

Without Combobox Fiddle

Javascript

document.getElementById("option_1").onclick = function() {
    if(this.checked)
        document.getElementById('choose_the_correct_answer').style.display = "block";
    else
        document.getElementById('choose_the_correct_answer').style.display = "none";
    }

I have tried this Jquery code too

$(document).ready(function(){
    $('#option_1').on('change', function() {
      if ( this.value == '1')
      {
        $("#choose_the_correct_answer").show();
      }
      else
      {
        $("#choose_the_correct_answer").hide();
      }
    });
});

HTML

<select id="control_3" name="control_3[]" multiple="multiple" size="5">
    <option value=""></option>
    <option id="option_1" value="option_1">Choose the Correct Answer</option>
    <option id="option_2" value="option_2">Fill in the Blanks</option>
    <option id="option_3" value="option_3">True or False</option>
    <option id="option_4" value="option_4">Match the Following</option>
    <option id="option_5" value="option_5">Two Mark Questions</option>
    <option id="option_6" value="option_6">Five Mark Questions</option>
    <option id="option_7" value="option_7">Others</option>
</select>
<div id="choose_the_correct_answer">choose the correct answer</div>
<div id="fill_in_the_blanks">fill in the blanks</div>
<div id="true_or_false">true or false</div>
<div id="match_the_following">match the following</div>
<div id="two_mark_questions">two mark questions</div>
<div id="five_mark_qustions">five mark questions</div>
<div id="others">others</div>

回答1:

try

 $('#option_1').on('click', function() {
});

and

the condition should be

if ( this.value == 'option_1')

JSFIDDLE

$(document).ready(function(){
    $('#option_1').on('click', function() {      
      if ( this.value == 'option_1')
      {
        $("#choose_the_correct_answer").show();
      }
      else
      {
        $("#choose_the_correct_answer").hide();
      }

    });
});

UPDATE:

AND a better option will be to use .togggle() if you intend to use multiselect

UPDATED DEMO

JS:

$(document).ready(function(){
    $('option').on('click', function() {         
      if ( this.value == 'option_1')
      {
        $("#choose_the_correct_answer").toggle();
      }
       else if ( this.value == 'option_2')
      {
        $("#fill_in_the_blanks").toggle();
      }
      else if ( this.value == 'option_3')
      {
        $("#true_or_false").toggle();
      }
       else if ( this.value == 'option_4')
      {
        $("#match_the_following").toggle();
      }
       else if ( this.value == 'option_5')
      {
        $("#two_mark_questions").toggle();
      }
      else if ( this.value == 'option_6')
      {
        $("#five_mark_qustions").toggle();
      }
      else if ( this.value == 'option_7')
      {
        $("#others").toggle();
      }  
    });
});

New Update: using normal dropdown with multiselect

use