#JQuery UI

JQuery UI Part 9 : Membuat Select Menu Dengan JQuery UI

By Diki Alfarabi Hadi
10 February 2016
JQuery UI

JQuery UI Part 9 : Membuat Select Menu Dengan JQuery UI

JQuery UI Part 9 : Membuat Select Menu Dengan JQuery UI – Select menu atau yang biasa kita buat dengan HTMl adalah form select option. tapi kali ini di www.malasngoding.com tepatnya di tutorial JQuery UI Part 9 : Membuat Select Menu Dengan JQuery UI ini kita akan belajar membuat select menu dengan menggunakan jquery UI. JQuery UI menyediakan sebuah fungsi untuk membuat select menu. yaitu fungsi selectmenu(). langsung saja kita masuk ke tutorial select menu jQuery UI.

Membuat Select Menu Dengan JQuery UI

Caranya sangat mudah. kita hanya perlu membuat kerangka form select option seperti biasa. lalu memberikan fungsi selectmenu() jquery UI. jadi perhatikan contoh berikut ini.

selectmenu.html

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 9 : Membuat Select Menu Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Select Menu Dengan JQuery UI | www.malasngoding.com</h1>

<label for="tutorial">Pilih tutorial</label>

<option>AngularJS</option>

<option>NodeJS</option>

<option selected="selected">JQuery UI</option>

<option>JQuery Mobile</option>

<option>JQuery</option>

</select>

</fieldset>

</form>

</div>

</body>

$(document).ready(function(){

$( "#tutorial" ).selectmenu();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

fieldset{

border: 0;

}

label{

display: block;

margin: 30px 0 0 0;

}

select{

width: 200px;

}

dan hasilnya

JQuery UI Part 9 Membuat select menu dengan jquery ui

bisa teman-teman perhatikan. pertama buat kerangka select option html nya. oh ya pada element kita harus memberikan class atau id.di sini saya memberikan id tutorial.