关于jquery:使引导下拉按钮级联


Make bootstrap drop down buttons cascading

我在我的网页上添加了两个下拉框，如下所示，但我想使它们层叠，然后将下拉按钮的值传递给一个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
   <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
      <ul class="dropdown-menu">
         
<li>
Action
</li>

         
<li>
Another action
</li>

         
<li>
Something else here
</li>

         <li class="divider">
</li>

         
<li>
Separated link
</li>

     
</ul>

<!-- /btn-group -->

   <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
      <ul class="dropdown-menu">
         
<li>
Action
</li>

         
<li>
Another action
</li>

         
<li>
Something else here
</li>

         <li class="divider">
</li>

         
<li>
Separated link
</li>

     
</ul>

<!-- /btn-group -->
相关讨论

正如Kylet在注释中提到的，您可以用枚举代替数组来完成。不过，作为一个舒适的选择，我将使用一个数组。小提琴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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>
" + states[i] +"
</li>
");
        }
    }
   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

  <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
   
<li>
Action
   
</li>

   
<li>
Another action
   
</li>

   
<li>
Something else here
   
</li>

    <li class="divider">
</li>

   
<li>
Separated link
   
</li>

 
</ul>


<!-- /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>
Action
   
</li>

   
<li>
Another action
   
</li>

   
<li>
Something else here
   
</li>

    <li class="divider">
</li>

   
<li>
Separated link
   
</li>

 
</ul>


<!-- /btn-group -->

相关讨论