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

-2

你好，我试图让我的raido按钮选择当我选择运动时选择一个下拉菜单我想要不同的运动显示，当我选择汽车我想要不同品牌的汽车品牌出现，但当我点击任何一个没有显示，所以我怎么能让我的单选按钮选择显示下拉菜单感谢。这里是一个链接代码http://jsfiddle.net/saber2356/fv8LLu9w/使用jquery改变选择菜单的单选按钮

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

和页面

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

来源

2014-12-05 852saber

提示：正确的缩进可以使您的生活更轻松的方式。 – melancia 2014-12-05 17:24:05

您是否在JavaScript控制台中看到任何错误？ – dave 2014-12-05 17:31:30

看一看这个小提琴：

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>

来源

2014-12-05 17:35:12 swatkins

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

回答

相关问题