更改复选框上的下拉菜单

change dropdown on checkbox

本文关键字：下拉菜单 复选框      更新时间：2023-09-26
<!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>

代码在style.css

下面
.myHide{
    display: none;
}
.myVisible{
    display: block;
}
custom.js中的

代码在

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

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

将无线电更改事件放入代码中。只需将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

应该是;

$(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');
    }
});

你可以把你的收音机改成' 

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

并将脚本更改为

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

这段代码应该是完全正确的:

$(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');
    }
  });
});
  1. 实现input[type='radio']
    2. 的变更监听器
  2. 每次点击单选按钮时，必须从所有选择框中删除myVisible类。
  3. 当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");
  });
});

试试这个，

 $("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方法不工作。为此，你必须使用prop

相关文章：