<!DOCTYPE html> <html> <head> <title>Chosen</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" /> <link rel="icon" type="image/ico" href="./img/favicon.ico"/> <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes"> <link href="css/normalize.css" rel="stylesheet" media="screen"> <link href="css/chosen.min.css" rel="stylesheet" media="screen"> <style> #network { width: 200px; } </style> <script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js/libs/chosen.jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { console.log("ready"); var networkSelector = $("#network"); networkSelector.chosen(); setTimeout(function() { console.log("fill"); networkSelector.append( $("<option></option>").val("a").html("Optie a"), $("<option></option>").val("b").html("Optie b"), $("<option></option>").val("c").html("Optie c") ); networkSelector.trigger("chosen:updated"); },1000); }); </script> </head> <body> <form id="networkForm"> <select id="network" name="" data-placeholder="Choose a country..."> <!-- <option value=""></option> --> </select> </form> </body> </html>