ซึ่งสามารถทำได้ ดังนี้
ขั้นตอนที่ 1
import bootstrap-select.css และ bootstrap.min.css โดยใช้คำสั่ง
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://thdoan.github.io/bootstrap-select/css/bootstrap-select.css">
import jquery.min.js bootstrap.min.js และ bootstrap-select.js โดยใช้คำสั่ง
โค้ด: เลือกทั้งหมด
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://thdoan.github.io/bootstrap-select/js/bootstrap-select.js"></script>
ทำการเรียกใช้ โดยอ้างอิง class selectpicker
data-thumbnail ="ที่อยู่ของไฟล์รูปภาพ"
โค้ด: เลือกทั้งหมด
<select class="selectpicker" >
<option value="">เลือก ...</option>
<option data-thumbnail="player_image/alisson.png" value="1">Alisson</option>
<option data-thumbnail="player_image/vandijk.png" value="2">Vandijk</option>
<option data-thumbnail="player_image/robertson.png" value="3">Robertson</option>
<option data-thumbnail="player_image/lovren.png" value="4">Lovren</option>
<option data-thumbnail="player_image/henderson.png" value=5>Henderson</option>
</select>
เมื่อรวมคำสั่ง จะได้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://thdoan.github.io/bootstrap-select/css/bootstrap-select.css">
</head>
<body>
<select class="selectpicker" >
<option value="">เลือก ...</option>
<option data-thumbnail="player_image/alisson.png" value="1">Alisson</option>
<option data-thumbnail="player_image/vandijk.png" value="2">Vandijk</option>
<option data-thumbnail="player_image/robertson.png" value="3">Robertson</option>
<option data-thumbnail="player_image/lovren.png" value="4">Lovren</option>
<option data-thumbnail="player_image/henderson.png" value=5>Henderson</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://thdoan.github.io/bootstrap-select/js/bootstrap-select.js"></script>
</body>
</html>
อ้างอิง
http://paulrose.com/bootstrap-select-sass/
https://codepen.io/Lihkinrian/pen/boOowo
https://thdoan.github.io/bootstrap-select/examples.html