在进行选择更改时更改动态div内的文本jQuery

Question

I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.

I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.

Here is my html:

<div class="shippingStateDiv">
    <span id="shippingStateSpan">Destination State<br />
    </span>
    <select name="shippingState" id="shippingState" class="shippingDropDown"
         onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
             <option value="-1" selected="selected">Please Select</option>
             <option value="129654">AB</option>
             <option value="129653">BC</option>
             <option value="129652">MB</option>
             <option value="129647">NB</option>
    </select>
</div>

Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.

<script type="text/javascript">
     $("#shippingStateSpan").text("Destination Province");
</script>

Answer 1

Try this:

$(document).ready(function(){

  var $select = $('#shippingState'),
      $span = $('#shippingStateSpan');

  $select.on('change', function(){

    $span.html('Destination Province');

  });

});

Answer 2

Try this

​$(function() {

    $('#shippingState').on('change', function() {

        $('#shippingStateSpan').text('Destination Province')
    });

});​

Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/