根据带有组合框选项的选定复选框显示和隐藏 div

Question

我使用了带有组合框选项的this 多选复选框..

JsFiddle

在我的 jsfiddle 中，具有组合框类型的复选框将不起作用。我的代码太多了。所以，我没有包括在内。请参阅此link 了解我试图根据所选复选框显示和隐藏 div 内容的完整代码。这是行不通的。我单独尝试了此代码（仅没有组合框复选框）。有用。我对组合框类型的复选框有疑问。如何使用组合框选项根据选中的复选框显示/隐藏 div 内容？

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";
    }

我也试过这个 Jquery 代码

$(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>

Answer 1

试试

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

和

条件应该是

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

    });
});

更新：

如果您打算使用多选，更好的选择是使用.togggle()

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

新更新：使用带多选的普通下拉菜单

使用

$('select').on('change', function() {

FIDDLE