Cara membuat select option di html

Search disini terdapat didalam form select option jadi saat diklik pada select maka akan muncul sebuah fungsi search didalamnya. Maka dari itu fungsi search tidak harus selalu muncul atau terlihat pada tampilan, jadi dalam kasus ini tampilan search ini akan sangat membantu saat pencarian jika data pada select terlalu banyak. Baiklah bagaimana sih cara membuat search didalam select option yuuuk perhatikan cara pembuatannya sebagai berikut.

Langkah pertama buatlah file HTML untuk struktur dasarnya seperti code dibawah ini:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<div class="container">

<h2>Membuat Search di Select Option</h2>

<select class="theSelect">

<option value="Codeigniter">Codeigniter</option>

<option value="FuelPHP">FuelPHP</option>

<option value="PhalconPHP">PhalconPHP</option>

<option value="Slim">Slim</option>

<option value="Silex">Silex</option>

<option value="CakePHP">CakePHP</option>

<option value="Symfony">Symfony</option>

<option value="Yii">Yii</option>

<option value="Laravel">Laravel</option>

<option value="Lumen">Lumen</option>

<option value="Zend">Zend</option>

</select>

</div>

nah pada select option saya memberikan beberapa data untuk dipilih, sebelumnya pada tag head berikan library JQuery dan plugin select2 coba perhatikan code berikut

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Membuat Search di Select Option Dengan Jquery </title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css">

Selanjutnya ketikkan script dibawah ini yang digunakan dalam jquery:

1

2

3

Jika sudah simpan filenya lalu kita sahabat lihat tampilannya pada browser masing-masing apakah seperti tampilan dibawah ini:

Cara membuat select option di html
Cara membuat select option di html

Cara membuat select option di html
Cara membuat select option di html

Demikian pembahasan kali ini tentang cara membuat search didalam select options, semoga bermanfaat dan sampai jumpa dengan pembahasan artikel lainnya,

Apa itu option pada HTML?

HTML element tag <option> merupakan tag pada HTML yang digunakan untuk menciptakan pilihan dalam bentuk menu drop down. Pilihan yang dapat dipilih oleh pengguna adalah satu.

Apa itu select option?

Elemen Select Option adalah elemen yang diperuntukkan untuk pengguna dapat memilih sebuah elemen diantara beberapa pilihan.

Apa itu input select?

Input select digunakan untuk memilih di antara beberapa pilihan. Pilihan di dalam elemen select dinyatakan dengan elemen option. Teks yang tampil diapit oleh tag option, sedangkan nilai yang dikirim ke server dinyatakan dalam atribut value pada elemen option.

Apa elemen HTML untuk membuat sebuah checkbox?

Tag Input type checkbox berfungsi untuk membuat checkbox atau kotak isian yang diisi dengan cara menceklist kotak tersebut.