Question

我使用了this多选复选框和一个组合框选项..

在我的jsfiddle中，带有组合框类型的复选框不起作用。我的代码太多了。所以，我没有包括在内。有关我正在尝试显示的完整代码，请参阅此link，并根据所选复选框隐藏div内容。这是行不通的。我单独尝试了这个代码（只有一个组合框复选框）。有用。复选框与复选框类型有问题。如何根据所选复选框和combobox选项显示/隐藏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

根据所选复选框和combobox选项显示和隐藏div

1 个答案: