當下拉被選中並單擊單選按鈕時顯示div

Question

我有這個drop down當我選擇該特定選項時，我得到一個radio按鈕，所以當我選擇單選按鈕時，我應該顯示一個div，當我選擇其他這div這是所示的drop down菜單現在應該被隱藏

的index.html

<select id="selection" name="sub_sel"> 
    <option value="blank"></option> 
    <option value="option_1">Option 1</option> 
    <option value="option_2">Option 2</option> 
</select> 

<div id="buttons" style="display:none;"> 
    <form id='form-id'> 
     <input id='radio1' name='test' type='radio' /> Number1<br /> 
     <input id='radio2' name='test' type='radio' /> Number 2<br /> 
    </form> 
</div> 

<div id='select_raido1' style='display:none'>Div1</div> 
<div id='select_raido2' style='display:none'>Div2</div> 

的jquery.js

$(document).ready(function(){ 
    $('#selection').on('change', function(){       

     if (this.value == 'option_1') 
     { 
      $("#buttons").show(); 
     }else{ 
      $("#buttons").hide(); 
     } 
    }); 
}); 

$('#form-id').change(function() { 

    if ($('#radio1').attr('checked')) { 
      $('#select_raido1').show(); 
    } else { 
      $('#select_raido1').hide(); 
    } 

    if ($('#radio2').attr('checked')) { 
      $('#select_raido2').show(); 
    } else { 
      $('#select_raido2').hide(); 
    } 
}); 

Here is a fiddle

這是我迄今爲止能有人告訴我我在做什麼不正確

我無法顯示格當我的單選按鈕點擊時隱藏起來選擇不同的下拉選項

Answer 1

檢查：檢查單選按鈕。試試這樣：

$('#form-id').change(function() { 

     if ($('#radio1').is(':checked')) { 
      $('#select_raido1').show(); 
     } else { 
      $('#select_raido1').hide(); 
     } 
     if ($('#radio2').is(':checked')) { 
      $('#select_raido2').show(); 
     } else { 
      $('#select_raido2').hide(); 
     } 
     }); 

更新小提琴：https://jsfiddle.net/43rx29vj/6/

Answer 2

很容易使加入的類名的元素更容易。

$(document).ready(function() 
 
{ 
 
\t $('#selection').on('change', function() 
 
{ \t \t \t \t \t \t 
 
\t if (this.value == 'option_1') 
 
\t \t { 
 
    \t \t $("#buttons").show(); 
 
\t \t }else{ 
 
\t \t \t $("#buttons").hide(); 
 
      $('.mySelect').hide(); 
 
\t \t } 
 
}); 
 

 
    $('.myRadio').click(function(){ 
 
    \t $('.mySelect').hide(); 
 
     $('#' + $(this).data('target')).show(); 
 
    }); 
 

 
}); 
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
\t <select id="selection" name="sub_sel"> 
 
\t \t \t <option value="blank"></option> 
 
\t \t \t <option value="option_1">Option 1</option> 
 
     <option value="option_2">Option 2</option> 
 
     </select> 
 
    
 
    
 
\t <div id="buttons" style="display:none;"> 
 
\t <form id='form-id'> 
 
    <input id='radio1' name='test' type='radio' data-target='select_raido1' class='myRadio' /> Number1<br /> 
 
    <input id='radio2' name='test' type='radio' data-target='select_raido2' class='myRadio' /> Number 2<br /> 
 
    </form> 
 
</div> 
 

 
<div id='select_raido1' style='display:none' class='mySelect'>Div1</div> 
 
<div id='select_raido2' style='display:none' class='mySelect'>Div2</div>

Answer 3

你可以簡化你的代碼，而不在你進行任何更改HTML代碼檢查例如波紋管。

注：

$("div[id^='select_']").hide(); //Mean hide all divs with id start by "select_" 

希望這有助於。

---

$(document).ready(function(){ 
 
    $('#selection').on('change', function() 
 
    { \t \t \t \t \t \t 
 
    if ($(this).val() == 'option_1') 
 
     $("#buttons").show(); 
 
    else 
 
     $("#buttons").hide(); 
 

 
    $("div[id^='select_']").hide(); 
 
    }); 
 

 
    $('#form-id input').change(function() { 
 
    $("div[id^='select_']").hide(); 
 
    $('#select_'+this.id).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="selection" name="sub_sel"> 
 
    <option value="blank"></option> 
 
    <option value="option_1">Option 1</option> 
 
    <option value="option_2">Option 2</option> 
 
</select> 
 

 

 
<div id="buttons" style="display:none;"> 
 
    <form id='form-id'> 
 
    <input id='radio1' name='test' type='radio' /> Number1<br /> 
 
    <input id='radio2' name='test' type='radio' /> Number 2<br /> 
 
    </form> 
 
</div> 
 

 
<div id='select_radio1' style='display:none'>Div1</div> 
 
<div id='select_radio2' style='display:none'>Div2</div>