如何使用jQuery更新p的值（段落标签）

Question

I want to update the value of the P tag on change of drop down menu using jquery. My code for changing and getting value using jquery is as follows. Please give some solutions thanks...

<script type="text/javascript">
(document).ready(function(){
  $('.dropdown-menu li a').click(function(){
    alert($(this).text());

  });
});
</script>

 <p id="qtitle" style="padding-left:15px;"><strong>text to change</strong></p>

Answer 1

Try this:

$(function(){
    $('.dropdown-menu li a').click(function(){
        $("#qtitle strong").html($(this).text());
    });
});

Answer 2

HTML:

<p id="qtitle" style="padding-left:15px;"><strong>text to change</strong></p>

<div id="myList" class="dropdown-menu">
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
</div>

JS:

 $('.dropdown-menu li a').click(function(){
    $('#qtitle strong').text($(this).text());
 });

.html(text) works, too. However .text(text) is a secure way to alter the text value of elements. Check out the doc at http://api.jquery.com/text/

See the working code at:

JSFiddle

Answer 3

Please replace your code as

  document.ready(function(){
      $('.dropdown-menu li a').click(function(){
        $("#qtitle strong").html($("#YourNewText").val());
      });
    });

Answer 4

HTML Code:

<select class="target">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<p id="qtitle" style="padding-left:15px;"><strong>Text to change</strong></p>

JQuery Code:

$( ".target" ).change(function() {
    $("#qtitle strong").html($(".target option:selected").text());
});

Demo in here jsfiddle.