在進行選擇更改時更改動態div內的文本jQuery

Question

我有一個下拉菜單標題，它是動態給出的，當前可以在頁面加載時更改它。 但是，一旦我從下拉菜單中選擇了一項，它就會變回來。 我正在尋找一個簡單的jquery js解決方案，當選擇一個項目時可以幫助保留名稱。

我需要在“目的地國家->目的地省份”中更改#shippingStateSpan中的文本，並且即使選擇了某些內容，也要保持這種方式。

這是我的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>

這是我最初用來進行更改的js（但是在選擇某些內容后它會變回）我假設可以使用jquery .on函數，但是我不確定該怎么做。 謝謝您的幫助。

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

Answer 1

嘗試這個：

$(document).ready(function(){

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

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

    $span.html('Destination Province');

  });

});

Answer 2

嘗試這個

​$(function() {

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

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

});​

在這里查看工作示例http://jsfiddle.net/sushanth009/zp7bA/