Twitter Bootstrap: Drop down list + Modal

How to combine the uses of  drop down list and modal together?

Let’s say we got a drop down like the following

<ul class=”nav nav-pills”>

<li class=”dropdown”>>

<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#” id=”dLabel” role=”button”>Index one<b></b></a>

<ul class=”dropdown-menu” role=”menu” aria-labelledby=”dLabel”>

<li><a tabindex=”-1″ href=”#” data-target=”#modal” data-slide-to=”0″>Index one</a></li>

<li><a tabindex=”-1″ href=”#” data-target=”#modal” data-slide-to=”1″>Index two</a>




Say you have a modal like the following:

<div id=”modal” class=”carousel slide” data-interval=”false”>

<ol class=”carousel-indicators”>>

<li data-target=”#modal” data-slide-to=”0″></li>

<li data-target=”#modal” data-slide-to=”1″></li>


<div class=”carousel-inner”>

<div class=”active item”>

Item One


<div class=”item”>

Item Two



<a href=”#modal” data-slide=”prev”>&lsaquo;</a>

<a href=”#modal” data-slide=”next”>&rsaquo;</a>


To update your selected text with drop down

//bind the slid even

$(“#menu”).bind(“slid”, function () {

//update the label with modal selected index read from the drop down list index

$(“#dLabel”).html($(“.dropdown-menu li a[data-slide-to='” + $(“.carousel-inner .active”).index() + “‘]”).text() + “<b class=’caret’></b>”);