Отображается div, когда выпадающее меню выбрано и нажимается радиокнопка

У меня есть это drop down, когда я выбираю эту конкретную опцию. Мне дана кнопка radio, поэтому, когда я выбираю радиокнопку, мне нужно отобразить div и когда я выберу что-то еще из drop down меню, div которое было показано, должны теперь быть скрытыОтображается div, когда выпадающее меню выбрано и нажимается радиокнопка

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

Это то, что я до сих пор кто-то может сказать мне, что я делаю неправильно

я не смог показать DIV, когда я нажимаю на кнопку радио и скрыть их, когда выбирая другой вариант сбрасывания

источник

2016-05-03 jake123

Обновлено скрипку https://jsfiddle.net/jitendratiwari/43rx29vj/3/ –

Отметьте: проверено на радиобуй. Попробуйте так:

$('#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/

источник

2016-05-03 13:36:10

'.toggle (BOOL)' можно было бы использовать, как хорошо! – Rayon

любая идея, как я могу скрыть Div, выбранный из переключателя, когда я нажимаю на следующий вариант выпадающего списка – jake123

Обновленная скрипка для этого .https: //jsfiddle.net/43rx29vj/4/ –

Это легче сделать ваши элементы более доступными, добавив имена классов.

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

источник

2016-05-03 13:43:01 Mojtaba

это тоже легко спасибо за ваш ответ :) оцените его – jake123

@ jake123, я попытался сделать меньше изменений на своих собственных кодах – Mojtaba

Вы могли бы упростить код, не меняя ничего в вас 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>

источник

2016-05-03 13:46:56

Отображается div, когда выпадающее меню выбрано и нажимается радиокнопка

ответ

Смежные вопросы