下拉列表选中要更改的图标

时间:2014-02-28 09:23:57

标签: javascript twitter-bootstrap yii

我已经实现了社交网站。朋友状态应根据所选的下拉按钮进行更改。我之后添加了我的代码。请提出合适的答案

<div class="dropdown" id="dLabel">
  <button class="btn-small btn-default " data-hover="dropdown" data-target="#" href="#">

朋友们   

         <li><a tabindex="-1" href="#">Close Friends</a></li>
         <li><a tabindex="-1" href="#">Notification</a></li>
         <li><a tabindex="-1" href="#">Acquaintances</a></li>
         <li class="divider"></li>
         <li><a tabindex="-1" href="#">Add Another List</a></li>
         <li><a tabindex="-1" href="#">Suggest Friends</a></li>
         <li class="divider"></li>
         <li><a tabindex="-1" href="#">Report/Block</a></li>
         <li><a tabindex="-1" href="#">Unfriend</a></li>

我的glyphicon图标需要更改。即我的下拉列表包含上面。通常图标将显示glyphicon-ok图标。如果我选择亲密的朋友,图标将会改变glyphicon-star。如果我选择熟人,另一个图标想要改变。喜欢facebook的朋友状态。当我们改变亲密的朋友。改变黄星的图标。喜欢明智我想改变请建议我合适的答案

1 个答案:

答案 0 :(得分:0)

首先,我理解你的问题,但不能说你想要达到你的要求。但无论你使用什么,这将是hwlpful。 我建议你使用这样的东西

<select  id="dLabel">
<option value="CloseFriends">Close Friends</option>
<option value="Notification">Notification</option>
//....other options as you used in your code

</select>

在该下拉列表中添加一个监听器,并根据if条件进行相应的编码。

$('#dLabel').bind('change', function(e,p) {  // bind event listener on that component
var dat=$(this).val(); //get the value of the selected option

if(val=='CloseFriends'){
    //action
     }
   //similarly your other conditions

        });