3

I have added two drop down boxes on my webpage like below, but I want to make them cascading and then pass the value of the drop down button to a function. 

<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 -->
Leandro Carracedo
  • 7,233
  • 2
  • 44
  • 50
Nadir
  • 126
  • 1
  • 11
  • What do you mean by cascading? I also suggest you to build a bootply and add your code (include your js functions). – Leandro Carracedo Feb 06 '15 at 14:41
  • http://stackoverflow.com/a/9773450/3917754 Check this answer of @Andres Ilich I think it's what you want – demo Feb 06 '15 at 14:43
  • 1
    thanks for the link... but what I want is suppose a user select a country from the first drop down .. then all the states related to the selected country should be populated in the second drop down – Nadir Feb 06 '15 at 14:46
  • You would need an array that would pertain to the country selected. After that it is fairly easy. – Wild Beard Feb 06 '15 at 14:49
  • @Press Not necessarily, you could also use Enumerations to accomplish the task. Simply map the country enum to the state enum. – Master Yoda Feb 06 '15 at 14:50
  • can you please provide me some code... I am pretty new to this.. – Nadir Feb 06 '15 at 14:50
  • @KyleT I've actually never used enums in Javascript. – Wild Beard Feb 06 '15 at 15:04
  • @Press Have a look at this SO question http://stackoverflow.com/questions/287903/enums-in-javascript. They are very similar to how you have used arrays in your answer. – Master Yoda Feb 06 '15 at 15:59

1 Answers1

5

As KyleT mentioned in the comments you could accomplish with enum in place of arrays. However as a comfort pick I'll be using an array. 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 -->
Wild Beard
  • 2,919
  • 1
  • 12
  • 24