$('.select-change').click(function() {
  $('#City').val($(this).data('val')).trigger('change');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>


<div data-role="page" id="page12">
  <div data-theme="e" data-role="header">
    <a href="#page1" data-icon="back" data-transition="flow" data-direction="reverse" data-ajax="false">Back</a>
    <h3>
      jQuery Mobile App
    </h3>
  </div>
  <div data-role="content">
    <label for="City">Select City</label>
    <select name="City" id="City">
      <option value="">Select city...</option>
      <option value="A">Auckland</option>
      <option value="W">Wellington</option>
      <option value="C">Christchurch</option>
      <option value="Q">Queenstown</option>
      <option value="D">Dunedin</option>
    </select>
    <br>
    <div data-role="controlgroup">
      <a data-role="button" data-val="A" class="select-change" id="btnAuckland">Auckland</a>
      <a data-role="button" data-val="W" class="select-change" id="btnWellington">Wellington</a>
      <a data-role="button" data-val="C" class="select-change" id="btnChristchurch">Christchurch</a>
      <a data-role="button" data-val="Q" class="select-change" id="btnQueenstown">Queenstown</a>
      <a data-role="button" data-val="D" class="select-change" id="btnDunedin">Dunedin</a>
    </div>
  </div>
  <!-- Close Content Div of Page12 -->
</div>
<!-- Close Page12 -->