diff --git a/README.md b/README.md
index ad727f1..74a64a5 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,19 @@ This example will create a Flagstrap Dropdown giving the input field the name of
```
+##### 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
+
+```
+
### Options
diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 77a0212..1447697 100644
--- a/src/jquery.flagstrap.js
+++ b/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 = ' ' + 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 = $('').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));
+ }
}
});