Question

当我选择特定选项时，我有drop down我给了radio按钮，所以当我选择单选按钮时，我应该显示div，当我选择其他内容时从drop down菜单中显示的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

Answer 1

检查：检查radiobutton。试试这样：

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

通过添加类名，可以更轻松地使元素更易于访问。

＆＃13;

$(document).ready(function()
{
	$('#selection').on('change', function()
{						
	  if (this.value == 'option_1')
		{
  		$("#buttons").show();
		}else{
			$("#buttons").hide();
          $('.mySelect').hide();
		}
});

    $('.myRadio').click(function(){
    	$('.mySelect').hide();
      $('#' + $(this).data('target')).show();
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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' 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>

＆＃13;

Answer 3

您可以在不更改任何内容的情况下简化代码HTML代码检查以下示例。

注意：

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

希望这有帮助。

$(document).ready(function(){
  $('#selection').on('change', function()
  {						
    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>

选择下拉列表并单击单选按钮时显示div

3 个答案: