Set displayValues as selected value (Picker)

Questions
1

I have this code :

      <li class="item-content item-input item-input-with-info">
        <div class="item-media">
          <i class="material-icons">location_on</i>
        </div>
        <div class="item-inner">
          <div class="item-title item-label">Provinsi</div>
          <div class="item-input-wrap">
            <input type="text" placeholder="Masukkan provinsi" id="provinsi_picker">
            <input type="hidden" name="provinsi" id="provinsi">
            <div class="item-input-info">*wajib diisi</div>
          </div>
        </div>
      </li>

and this is the js code :

    //picker provinsi
    this.pickerProvince = app.picker.create({
      inputEl: '#provinsi_picker',
      rotateEffect: true,
      cols: [
        {
          textAlign: 'center',
          values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
          displayValues: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3'],
          onChange: function (picker, values, displayValues, hidden) {
            $("#provinsi").val(values);
            $("#provinsi_picker").val(displayValues);
          }
        }
      ]
    });

I have set $("#provinsi") and $("#provinsi_picker") values, but it was not working. How to set the selected displayValues in #provinsi_picker and set the selected values in #provinsi ?

Thanks in advance.