Сделать кнопки загрузки бутстрапа каскадом

Я добавил два выпадающих списка на моей веб-странице, как показано ниже, но я хочу сделать их каскадом, а затем передать значение кнопки раскрывающегося списка функции.Сделать кнопки загрузки бутстрапа каскадом

<div class="btn-group"> 
    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
     <li><a href="#" onClick="return false;">Action</a></li> 
     <li><a href="#" onClick="return false;">Another action</a></li> 
     <li><a href="#" onClick="return false;">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#" onClick="return false;">Separated link</a></li> 
     </ul> 
</div><!-- /btn-group --> 
<div class="btn-group"> 
    <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
     <li><a href="#" onClick="return false;">Action</a></li> 
     <li><a href="#" onClick="return false;">Another action</a></li> 
     <li><a href="#" onClick="return false;">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#" onClick="return false;">Separated link</a></li> 
     </ul> 
</div><!-- /btn-group -->

источник

2015-02-06 Nadir

Что вы имеете в виду каскадные? Я также предлагаю вам построить bootply и добавить свой код (включая функции js). –

http://stackoverflow.com/a/9773450/3917754 Проверьте этот ответ @Andres Ilich Я думаю, что это то, что вы хотите – demo

спасибо за ссылку ... но я хочу, чтобы пользователь выбирал страну из сначала выпадаете вниз .. тогда все состояния, связанные с выбранной страной, должны быть заполнены во втором падении – Nadir

Как упоминалось в комментариях к KyleT с перечислением вместо массивов. Однако, как выбор комфорта, я буду использовать массив. Fiddle

var states = [ 
 
    "Kansas", 
 
    "Oklahoma", 
 
    "Texas"  
 
]; 
 

 
$('.dropdown-menu > li > a').click(function() { 
 
    yourFunction(this.text); 
 
}); 
 

 
function yourFunction(val) { 
 
     
 
    if (val === "Action") { 
 
     $('#states').html(''); 
 
     for (var i in states) { 
 
      $('#states').append("<li><a href='#'>" + states[i] + "</a></li>"); 
 
     } 
 
    } 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="btn-group"> 
 
    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Action</a> 
 
    </li> 
 
    <li><a href="#">Another action</a> 
 
    </li> 
 
    <li><a href="#">Something else here</a> 
 
    </li> 
 
    <li class="divider"></li> 
 
    <li><a href="#">Separated link</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!-- /btn-group --> 
 
<div class="btn-group"> 
 
    <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="states"> 
 
    <li><a href="#">Action</a> 
 
    </li> 
 
    <li><a href="#">Another action</a> 
 
    </li> 
 
    <li><a href="#">Something else here</a> 
 
    </li> 
 
    <li class="divider"></li> 
 
    <li><a href="#">Separated link</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!-- /btn-group -->

источник

2015-02-06 15:09:26

Удивительный !!! Я работал над этим почти 3 часа .. Удивительно! Спасибо – Nadir

Сделать кнопки загрузки бутстрапа каскадом

ответ

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