变化下拉

<!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的初学者。

来源

2016-11-09 R K

你应该添加一个事件监听器，火是选择任何复选框时，然后隐藏或显示相应。 –

戴上无线电在代码中更改事件。只要改变你的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

来源

2016-11-09 12:56:25

您的输出是正确的，但问题是第2和第3下拉列表需要额外的空间。 –

这是因为
，删除
然后多余的空间将被删除。 –

是的，帮助了很多，谢谢。 –

试试这个，

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

来源

2016-11-09 07:51:55

这根本不起作用。 –

你似乎误解了这个问题。当收音机改变时，OP想要改变可见的元素。OP目前拥有的'if'语句是好的 –

我想知道，它不工作，但在短短的2秒内得到了upvote ..范围 –

应该是;

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

来源

2016-11-09 07:53:47 Laazo

这不会改变任何东西 - OPs'if'语句正确 –

您可以将电台改为`

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

来源

2016-11-09 08:28:31

此代码应该是完全的真理：

$(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']
每次单击一个辐射按钮时，必须从所有选择框中删除类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代码：

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

来源

2016-11-09 08:45:04 zuluk

回答

相关问题