Saturday, June 17, 2017

cara memasukkan link pada select option html

Tags

cara memasukkan link pada select option html. select option pada html tidak hanya bisa digunakan untuk menginput pilihan data tetapi juga bisa dimasukkan link. pada awalnya saya mencoba memasukkan tag <a href=""> </a> didalam option seperti ini :

<select>
    <option value="1"><a href="">Pilihan 1</a></option>
    <option value="2"><a href="">Pilihan 2</a></option>
</select>

ternyata link pada select option seperti ini tidak berfungsi, akhirnya saya menemukan cara agar link itu bisa bekerja yaitu dengan cara menambahkan kode javascript. seperti ini :

 <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="target link 1 disini">Pilihan 1</option>
    <option value="target link 1 disini">Pilihan 2</option>
</select>

karena saya menggunakan bootstrap maka kodenya seperti ini :

<form class="form-horizontal">

<!-- Form Name -->

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-8 control-label" for="selectbasic">PILIH</label>
  <div class="col-md-4">
    <select id="selectbasic" name="selectbasic" class="form-control" onChange="document.location.href=this.options[this.selectedIndex].value;">
      <option value="0" selected>Data PIK </option>
      <option value="https://drive.google.com/file/d/0B_YVKIJGyW8JazVSd3JUTlZIVGc/preview">Data PIK 29 April 2017</option>
      <option value="https://drive.google.com/file/d/0B_YVKIJGyW8JSnV2R1hTVHZOQ1U/preview">Data PIK 02 Mei 2017</option>
      <option value="https://drive.google.com/file/d/0B_YVKIJGyW8JemRXMzFFN0tHMzg/preview">Data PIK 16 Mei 2017</option>
      <option value="https://drive.google.com/file/d/0B_YVKIJGyW8JU0h4Rkx4ellBYTQ/preview">Data PIK 15 Juni 2017</option>
    </select>
  </div>
</div>

</form>

dan ini hasilnya :



select option yang disisipi link ini bisa digunakan untuk berbagai keperluan. misalnya menampilkan data berdasarkan tanggal, menampilkan data berdasarkan wilayah dan lainnya. disini saya menggunakan select option disisipi link untuk keperluan menampilkan laporan progres data PIK berdasarkan tanggal.

demikian catatan singkat ini, semoga bermanfaat

Berilah komentar sessuai dengan topik, gunakan bahasa yang santun.
dilarang SARA, SPAM dan Iklan
EmoticonEmoticon