Question

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<label class="">
    <input type="radio" id="check1" name="ohradio" checked>bike
</label>
<label class="">
    <input type="radio" id="check2" name="ohradio">car
</label>
<label class="">
    <input type="radio" id="check3" name="ohradio">cycle
</label>
<br /><br />
<select id="firstDropdown" class="">
    <optgroup >
      <option>bike 1</option>
      <option>bike 2</option>
      <option>bike 3</option>
    </optgroup>
</select>
<br /><br />
<select id="secondDropdown" class="myHide">
    <optgroup >
      <option>car 1</option>
      <option>car 2</option>
      <option>car 3</option>
    </optgroup>
</select>
<br /><br />
<select id="thirdDropdown" class="myHide">
    <optgroup >
      <option>cycle 1</option>
      <option>cycle 2</option>
      <option>cycle 3</option>
    </optgroup>
</select>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

<{1}}中的

代码低于

style.css

<{1}}中的

代码低于

.myHide{
    display: none;
}
.myVisible{
    display: block;
}

我想更改当用户选择其他单选按钮时显示的下拉列表，例如，当他们点击自行车单选按钮时，应显示自行车下拉列表，并且应隐藏其他下拉菜单。但是上面的代码不起作用。我是jquery的初学者。

Answer 1

在您的代码中添加无线电更改事件。只需将您的JavaScript脚本更改为

即可

$(document).ready(function (){
  $("input[type=radio]").change(function(){
    $("select").removeClass('myVisible myHide');
    if(check1.checked){
        $('#firstDropdown').addClass('myVisible');
        $('#secondDropdown').addClass('myHide');
        $('#thirdDropdown').addClass('myHide');
    }
    if(check2.checked){
        $('#firstDropdown').addClass('myHide');
        $('#secondDropdown').addClass('myVisible');
        $('#thirdDropdown').addClass('myHide');
    }
    if(check3.checked){
        $('#firstDropdown').addClass('myHide');
        $('#secondDropdown').addClass('myHide');
        $('#thirdDropdown').addClass('myVisible');
    }
  });

});

请参阅演示https://jsbin.com/lihusikoye/edit?html,css,js,output

Answer 2

试试这个，

 $("input[type=radio]").change(function(){
    if($("#check2").attr("checked")=="checked") {
        $('#firstDropdown').addClass('myHide');
        $('#secondDropdown').addClass('myVisible');
        $('#thirdDropdown').addClass('myHide');
    }
    if($("#check3").attr("checked")=="checked") {
        $('#firstDropdown').addClass('myHide');
        $('#secondDropdown').addClass('myHide');
        $('#thirdDropdown').addClass('myVisible');
    }
});

在某些jquery版本中attr mehtod不起作用。为此，您必须使用prop

Answer 3

应该是;

$(document).ready(function (){
    if($('#check2').is(':checked'){
        $('#firstDropdown').addClass('myHide');
        $('#secondDropdown').addClass('myVisible');
        $('#thirdDropdown').addClass('myHide');
    }
    if($('#check3').is(':checked')){
        $('#firstDropdown').addClass('myHide');
        $('#secondDropdown').addClass('myHide');
        $('#thirdDropdown').addClass('myVisible');
    }
});

Answer 4

you can change your radio to `

<label class="">
    <input type="radio" id="check1" name="ohradio" data-show="firstDropdown"     checked>bike
</label>
<label class="">
    <input type="radio" id="check2" name="ohradio" data-show="secondDropdown">car
</label>
<label class="">
    <input type="radio" id="check3" name="ohradio" data-show="thirdDropdown">cycle
</label>

and change your script to

$(document).on("change", "input[name='ohradio']", function () {
    $("select").fadeOut();
    $("#"+$(this).data("show")).fadeIn();   
});

Answer 5

这段代码应该是完整的事实：

$(document).ready(function (){
  $("input[type='radio']").change(function(){
    $("select").removeClass("myVisible");
    if($('#check1').is(':checked')){
      $('#firstDropdown').addClass('myVisible');
      $('#secondDropdown').addClass('myHide');
      $('#thirdDropdown').addClass('myHide');
    }
    if($('#check2').is(':checked')){
      $('#firstDropdown').addClass('myHide');
      $('#secondDropdown').addClass('myVisible');
      $('#thirdDropdown').addClass('myHide');
    }
    if($('#check3').is(':checked')){
      $('#firstDropdown').addClass('myHide');
      $('#secondDropdown').addClass('myHide');
      $('#thirdDropdown').addClass('myVisible');
    }
  });
});

为input[type='radio']
每次点击一个Radion按钮时，您都必须从所有选择框中删除该类myVisible。
同时在检查check1时设置类。

还有一个代码更短的解决方案，但是如果你是初学者，那么理解和学习会更好。

简短且更灵活：

更改选择框的ID，如下所示：

<select id="sel_check1" class="myVisible">
  <optgroup >
    <option>bike 1</option>
    <option>bike 2</option>
    <option>bike 3</option>
  </optgroup>
</select>

<select id="sel_check2" class="myHide">
  <optgroup >
    <option>car 1</option>
    <option>car 2</option>
    <option>car 3</option>
  </optgroup>
</select>

<select id="sel_check3" class="myHide">
  <optgroup >
    <option>cycle 1</option>
    <option>cycle 2</option>
    <option>cycle 3</option>      
  </optgroup>
</select>

然后你只需要js-code：

$(document).ready(function (){
   $("input[type='radio']").change(function(){
     $("select").removeClass("myVisible").addClass("myHide");            
     $("#sel_"+$(this).attr("id")).addClass("myVisible").removeClass("myHide");
  });
});

更改复选框上的下拉列表

5 个答案: