Bagaimana Cara Membuat Option Select Input via Javascript

Anda tentu pernah mengenal dengan kode-kode seperti yang dibawah ini:
<select id="thisID">
<option value="1">Pilihan 1</option>
<option value="2">Pilihan 2</option>
<option value="3">Pilihan 3</option>
</select>
Pada bagian value="1" ataupun value="2" akan terhubung dengan mesin lainya yang telah disesuaikan sebelumnya.

Namun permasalahannya terkadang kita mengharapkan bahwa adakalanya value="1" dan seterusnya itu dirubah menjadi pilihan secara langsung.

Misalnya:
<select id="thisID">
<option value="Pilih ini">Pilih ini</option>
</select>
Untuk pembentukan kode seperti diatas tidak dianjurkan karena tidak akan berhasil.

Jika Anda ingin membuat kode-kode seperti itu maka perlu menambahkan beberapa javascript dan CSS disekitarnya.

Berikut kode-kode yang bisa Anda gunakan, silahkan diedit sesuai dengan kebutuhan Anda.
<form action="yoursites.html" method="post">
<div class="Kangsigit">
<input class="form-control" type="text" id="Makanan" value="Makanan Favorite" size="10"/>
<ul>
<label>1 __</label><li>Martabak</li>
<label>2 __</label><li>Pizza</li>
<label>3 __</label><li>Nasi Goreng</li>
<label>4 __</label><li>Sushi</li>
<label>5 __</label><li>Semur Jengkol</li>
</ul>
</div>

<div class="Kangsigit">
<input class="form-control" type="text" id="Minuman" value="Minuman Favorite" size="10"/>
<ul>
<label>1 __</label><li>Jus Alpukat</li>
<label>2 __</label><li>Jas Jus</li>
<label>3 __</label><li>Tuak</li>
<label>4 __</label><li>Air Putih</li>
<label>5 __</label><li>Teh Susu</li>
</ul>
</div>
<input type="submit" value="Submit URL"/>
 </form>
<script>
function Kangsigit(id, h, l) {
 var self = this;
 self.h = h;
 self.l = l;
 self.inp = document.getElementById(id);
 self.hasfocus = false;
 self.sel = -1;
 self.ul = self.inp.nextSibling;
 while (self.ul.nodeType == 3) self.ul = self.ul.nextSibling;
 self.ul.onmouseover = function() {
 self.ul.className = '';
 };
 self.ul.onmouseout = function() {
 self.ul.className = 'focused';
 if (!self.hasfocus) self.ul.style.display = 'none';
 };
 self.list = self.ul.getElementsByTagName('li');
 for (var i = self.list.length - 1; i >= 0; i--) {
 self.list[i].onclick = function() {
 self.inp.value = this.firstChild.data;
 self.rset(self);
 }
 }
 self.inp.onfocus = function() {
 self.ul.style.display = 'block';
 self.ul.className = 'focused';
 self.hasfocus = true;
 self.sel = -1;
 };
 self.inp.onblur = function() {
 if (self.ul.className == 'focused') {
 self.rset(self);
 }
 self.ul.className = '';
 self.hasfocus = false;
 };
 self.inp.onkeyup = function(e) {
 var k = (e) ? e.keyCode : event.keyCode;
 if (k == 40 || k == 13) {
 if (self.sel == self.list.length - 1) {
 self.list[self.sel].style.backgroundColor = self.l;
 self.sel = -1;
 }
 if (self.sel > -1) self.list[self.sel].style.backgroundColor = self.l;
 self.inp.value = self.list[++self.sel].firstChild.data;
 self.list[self.sel].style.backgroundColor = self.h;
 } else if (k == 38 && self.sel > 0) {
 self.list[self.sel].style.backgroundColor = self.l;
 self.inp.value = self.list[--self.sel].firstChild.data;
 self.list[self.sel].style.backgroundColor = self.h;
 }
 return false;
 };
}
Kangsigit.prototype.rset = function(self) {
 self.ul.style.display = 'none';
 self.sel = -1;
 for (var i = self.list.length - 1; i >= 0; i--) {
 self.list[i].style.backgroundColor = self.l;
 }
 return false;
};
new Kangsigit('Makanan'); // Label makanan
new Kangsigit('Minuman'); // Label minuman
</script>
<style>
input.form-control{height:30px!important}
textarea.form-control{width:900px;height:300px;padding:0 5px;margin-bottom:10px;overflow:auto}
.Kangsigit {position:relative;width:190px;text-align:left;padding:0;margin:0;}
.Kangsigit * {padding:0;margin:0;}
.Kangsigit label {display:block;float:left;text-align:right;}
.Kangsigit input {width:900px; background-color:#DAE2D8;height:1.5em;z-index:0;padding:10px;margin-bottom:5px;border:solid 1px #333}
.Kangsigit ul {padding:1px;border:2px solid #ccc;width: 894px;background-color:#cfc;position:absolute;top:3px;display:none;z-index:1;margin-top:-5px;max-height:550px!important;overflow:auto;}
.Kangsigit li {display:block; width: 100%;cursor:default;}
.Kangsigit li:hover{background:#eee!important;color:#333;padding:0}
</style>
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini