使用jquery更改选择菜单的单选按钮_Jquery

使用jquery更改选择菜单的单选按钮

jquery

使用jquery更改选择菜单的单选按钮,jquery,Jquery,您好，我正在尝试让我的raido按钮选择一个下拉菜单当我选择运动时，我希望显示不同的运动，当我选择汽车时，我希望显示不同品牌的汽车，但当我单击其中一个时，没有显示任何内容，因此如何让我的单选按钮选择显示下拉菜单谢谢。下面是代码的链接 $（函数（）{ //$（“[name=select]”）。更改（函数（）{ $（'input[type=radio][id=radio1]'）。更改（函数（）{ $（“#列表”）。切换（$（“[name=select]”）。索引（this）==0）； $（“#列

您好，我正在尝试让我的raido按钮选择一个下拉菜单当我选择运动时，我希望显示不同的运动，当我选择汽车时，我希望显示不同品牌的汽车，但当我单击其中一个时，没有显示任何内容，因此如何让我的单选按钮选择显示下拉菜单谢谢。下面是代码的链接


$（函数（）{
//$（“[name=select]”）。更改（函数（）{
$（'input[type=radio][id=radio1]'）。更改（函数（）{
$（“#列表”）。切换（$（“[name=select]”）。索引（this）==0）；
$（“#列表2”）。切换（$（“[name=select]”）。索引（this）==1）；
}
});
});

那页面呢

<html>
<body>
<div class="row">
    <div class="col-sm-6 ">
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-4">Interest?</label>
            <div class="col-xs-8">
                <label class="radio-inline">
                <input type="radio" name="Radio1" id="Radio1" class="Radio1" value="sports"> Sports </label>
                <label class="radio-inline">
                <input type="radio" name="Radio1" id="Radio1" class="Radio1" value="cars"> Cars </label>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-4" id='choose'>Choose One</label>
            <div class="col-xs-8">
                <select class="form-control" div id="list" name='Cars' style='display:none'>
                    <option>Ford</option>
                    <option>Gm</option>
                    <option>Toyota </option>
                    <option>Other</option>
                </select>
                <select class="form-control" name='Sports' div id="list2" style='display:none'>
                    <option>Baseball</option>
                    <option>BasketBall</option>
                    <option>Football </option>
                    <option>Hockey</option>
                </select>
            </div>
        </div>
    </div>
    <input type="submit" value="Submit">
    <div class="clearfix visible-sm-block">
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>


兴趣？
体育
汽车
选一个
河流浅水处
转基因的
丰田
其他
棒球
篮球
足球
曲棍球

看看这把小提琴：

脚本：

$(function () {
    $('input[type=radio]').on('change', function (e) {
       var whichOne = $(e.currentTarget).val();
       $('select').hide();
       $('select[name=' + whichOne + ']').show();
    });
});

HTML:


兴趣？
体育
汽车
选一个
河流浅水处
转基因的
丰田
其他
棒球
篮球
足球
曲棍球

提示：正确的缩进可以让你的生活更轻松。你在JavaScript控制台中看到任何错误吗？

$(function () {
    $('input[type=radio]').on('change', function (e) {
       var whichOne = $(e.currentTarget).val();
       $('select').hide();
       $('select[name=' + whichOne + ']').show();
    });
});

<html>
<body>
<div class="row">
    <div class="col-sm-6 ">
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-4">Interest?</label>
            <div class="col-xs-8">
                <label class="radio-inline">
                <input type="radio" name="Radio1" id="Radio1" class="Radio1" value="Sports"> Sports </label>
                <label class="radio-inline">
                <input type="radio" name="Radio1" id="Radio1" class="Radio1" value="Cars"> Cars </label>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-4" id='choose'>Choose One</label>
            <div class="col-xs-8">
                <select class="form-control" div id="list" name='Cars' style='display:none'>
                    <option>Ford</option>
                    <option>Gm</option>
                    <option>Toyota </option>
                    <option>Other</option>
                </select>
                <select class="form-control" name='Sports' div id="list2" style='display:none'>
                    <option>Baseball</option>
                    <option>BasketBall</option>
                    <option>Football </option>
                    <option>Hockey</option>
                </select>
            </div>
        </div>
    </div>
    <input type="submit" value="Submit">
    <div class="clearfix visible-sm-block">
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>