Change value

README.md

@@ -90,6 +90,19 @@ This example will create a Flagstrap Dropdown giving the input field the name of
 </script>
 ```
 
+##### Setting value of widget after creation
+You cannot set the value of the widget using the val() method on the underlying select, as this does not notify the plugin of the change.
+
+Passing a string value to the plugin instead of an object will change value of the underlying select and update the UI display. The string passed should be the country code of the country to select.
+
+The example below will take the flagstrap widget created in the example above and change its selected value to the United States.
+
+```html
+<script>
+    $('#flagstrap3').flagStrap('US');
+</script>
+```
+
 ### Options
 <table class="table table-bordered table-striped">
     <thead>

src/jquery.flagstrap.js

@@ -318,6 +318,26 @@
 
         };
 
+        /**
+         * Acts like the jQuery val() but on the actual flagStrap object not the underlying
+         * select. For this reason it also does not fire the change event, as in jQuery val() does
+         * not cause triggering over underlying change events
+         * 
+         * @param {string} country_code 
+         */
+        plugin.val = function(country_code) {
+            // set the underlying select to the new value
+            $(htmlSelect).val(country_code);
+            // update the UI of the flag widget to show the new country selection
+            var html = '';
+            if ( country_code == plugin.settings.placeholder.value ) {
+                html = '<i class="flagstrap-icon flagstrap-placeholder"></i> ' + plugin.settings.placeholder.text;
+            } else {
+                html = $container.find('li a[data-val='+country_code+']').html();
+            }
+            $('.flagstrap-selected-' + uniqueId).html( html );
+        }
+
         var buildHtmlSelect = function () {
             var htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
 
@@ -449,8 +469,13 @@
     $.fn.flagStrap = function (options) {
 
         return this.each(function (i) {
-            if ($(this).data('flagStrap') === undefined) {
-                $(this).data('flagStrap', new $.flagStrap(this, options, i));
+
+            if ( typeof options === 'string' && $(this).data('flagStrap') !== undefined ) {
+                $(this).data('flagStrap').val(options);
+            } else {
+                if ($(this).data('flagStrap') === undefined) {
+                    $(this).data('flagStrap', new $.flagStrap(this, options, i));
+                }
             }
         });