显示和隐藏div取决于所选复选框与组合框选项 [英] show and hide div depending upon selected checkbox with combobox option

问题描述

我已使用 此 多选框带有组合框选项。

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

JsFiddle

在我的jsfiddle中，使用组合框类型的复选框将不起作用。我有太多的代码。所以，我没有包括。有关完整代码，请参阅此 链接 尝试根据所选复选框显示和隐藏div内容。这是行不通的。我单独尝试这个代码（不带组合框复选框）。有用。我有复选框与组合框类型的问题。如何根据所选的复选框使用combobox选项显示/隐藏div内容？

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?

不使用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 p>

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>

推荐答案

尝试

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

和

/ p>

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 ：

更好的选择是使用 .togggle（） 如果您打算使用multiselect

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

更新的演示

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

使用

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

FIDDLE

这篇关于显示和隐藏div取决于所选复选框与组合框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！