(function($) {
$.fn.selectstyle = function(option) {
var defaults = {
width: 250,
height: 300,
theme: 'light'
},
setting = $.extend({}, defaults, option);
this.each(function() {
var $this = $(this),
parent = $(this).parent(),
html = '',
html_op = '',
search = $this.attr('data-search'),
name = $this.attr('name'),
style = $this.attr('style'),
placeholder = $this.attr('placeholder'),
id = $this.attr('id');
// additional code goes here
});
$("body").delegate("div#ss_search input", "keyup", function(e) {
// code to handle keyup event
});
// other event handlers and functions go here
}
})(jQuery);
/** CSS style for the jQuery selectstyle Plugin **/
/* CSS styles for light theme */
.selectstyle {
/* CSS styles for selectstyle container */
}
/* more CSS styles for light theme */
/* Dark theme CSS styles */
.selectstyle.dark {
/* CSS styles for dark theme selectstyle container */
}
/* more CSS styles for dark theme */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery selectstyle Plugin Demos</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="selectstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget sodales lorem. Integer ut eros a velit tincidunt scelerisque. Duis non risus ac sapien vulputate fermentum. Duis malesuada semper consequat. Fusce ut odio in elit porta mattis. Vivamus non libero...
</p>
<select theme="google" width="400" style="" placeholder="Select Your Favorite" data-search="true">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
</select>
</body>
</html>