Радио-кнопки с использованием 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

Вы видите ошибки в консоли JavaScript? – dave

Посмотрите на эту скрипку:

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 для изменения меню выбора

ответ

Смежные вопросы