jquery changing bootstrap label text dynamically

Question

I'm using code from this fiddle http://jsfiddle.net/kcpma/18/ what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.

my script

<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>

the actual html working with text input

<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>

the html i tried but it doesn't work 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>

any hints/ideas?

dave · Accepted Answer · 2015-08-27 16:18:42Z

4

$.val only works on input elements (including select). If you want to set the text, you could just do:

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

and

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

or

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

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

answered Aug 27, 2015 at 16:18

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Progs Over a year ago

there is any significant difference between 'html' and 'text'?

dave Over a year ago

.html will set the html - so you can do something like "<b>Hello</b>" and it will come out bold. If you do .text it will escape the text and will display the characters "<b>Hello</b>"

Collectives™ on Stack Overflow

jquery changing bootstrap label text dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related