Question

你好，我想尝试选择下拉菜单，当我选择运动时，我希望不同的运动能够出现，当我选择汽车时，我想要不同品牌的汽车品牌出现，但是当我点击任何一个没有任何显示，所以如何让我的单选按钮选择显示下拉菜单谢谢。以下是代码http://jsfiddle.net/saber2356/fv8LLu9w/

的链接

<script>
$(function(){
    //$("[name=select]").change(function(){
        $('input[type=radio][id=radio1]').change(function() {
            $("#list").toggle($("[name=select]").index(this)===0);
            $("#list2").toggle($("[name=select]").index(this)===1);
        }
    });
}); 
</script>

和Page

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

Answer 1

看看这个小提琴：

http://jsfiddle.net/fv8LLu9w/1/

SCRIPT：

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

HTML：

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

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

1 个答案: