jquery动态更改引导标签文本

时间:2015-08-27 16:15:29

标签: javascript jquery html twitter-bootstrap

我正在使用这个小提琴中的代码http://jsfiddle.net/kcpma/18/ 我试图实现的是根据从按钮中选择的值来显示或取消隐藏引导标签,标签中的文本应该更改,但仅适用于html输入表单,如文本,这不是看起来很糟糕,但我想使用bootstrap标签看起来像过滤器标签。

我的剧本

<script>
$('#demolist li').on('click', function(){
    var val=$(this).text();
    $('#datebox').val($(this).text());

    if(val=="A"){ // if certain filter is selected the label should appear
    $('#filter').show();
      $('#filter').val("AaA");
      }else{ // else the tag shouldn't be visible
      $('#filter').hide();
      }
});

</script> 

使用文本输入的实际html

<br /> <br />     
<div class="container">
    <div class="col-sm-8">
        <div class="input-group">                                            

           <input type="TextBox" ID="datebox" Class="form-control" ></input>

           <div class="input-group-btn">

                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>

                <ul id="demolist" class="dropdown-menu">
                    <li><a>A</a></li>
                    <li><a>B</a></li>
                    <li><a>C</a></li>
                </ul>

            </div>

        </div>
    </div>
    <br>
     <h4 ><span class="label label-primary"  >&times;</span></h4>
     <p><input type="text" class="form-control" ID="filter"  style="width:100px" disabled></p>

</div>

我试过的HTML,但它没有用 1)

<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>

2)

<h4  ID="filter"><span class="label label-primary">some filter</span></h4>

任何提示/想法?

1 个答案:

答案 0 :(得分:2)

$.val仅适用于input元素(包括select)。如果你想设置文本,你可以这样做:

<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>

$('#filter').html("AaA");

$('#filter').text("AaA");

http://jsfiddle.net/kcpma/261/