From 6e0143104c49ef4f52f0a435aa32b673312df7cf Mon Sep 17 00:00:00 2001
From: Git-Admin <mark.hewitt@centurionsolutions.com.au>
Date: Fri, 14 Sep 2018 12:40:40 +0200
Subject: [PATCH 1/3] Added ability to change selection after initialization

---
 README.md               | 13 +++++++++++++
 src/jquery.flagstrap.js | 23 +++++++++++++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ad727f1..df424ab 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
 </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.
+
+In order change the underlying value of the select and the UI display of the flag widget by passing a string in options instead of an object. The string passed should be the country code of the country to select.
+
+The example below will take an already setup flagStrap widget, and change its selected value to the United States.
+
+```html
+<script>
+    $('#flagstrap3').flagStrap('US');
+</script>
+```
+
 ### Options
 <table class="table table-bordered table-striped">
     <thead>
diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 77a0212..98ce777 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -318,6 +318,20 @@
 
         };
 
+        /**
+         * 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
+            $('.flagstrap-selected-' + uniqueId).html( $container.find('li a[data-val='+country_code+']').html() );
+        }
+
         var buildHtmlSelect = function () {
             var htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
 
@@ -449,8 +463,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));
+                }
             }
         });
 

From 3dbb4ed19bcd9cc4defddb8b923028d3880d9e0a Mon Sep 17 00:00:00 2001
From: Git-Admin <mark.hewitt@centurionsolutions.com.au>
Date: Fri, 14 Sep 2018 12:51:42 +0200
Subject: [PATCH 2/3] Documention update

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index df424ab..74a64a5 100644
--- a/README.md
+++ b/README.md
@@ -93,9 +93,9 @@ 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.
 
-In order change the underlying value of the select and the UI display of the flag widget by passing a string in options instead of an object. The string passed should be the country code of the country to select.
+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 an already setup flagStrap widget, and change its selected value to the United States.
+The example below will take the flagstrap widget created in the example above and change its selected value to the United States.
 
 ```html
 <script>

From 6fc925a614ab761a1e6be4ceb5ef508e662e55b8 Mon Sep 17 00:00:00 2001
From: Git-Admin <mark.hewitt@centurionsolutions.com.au>
Date: Fri, 14 Sep 2018 13:16:38 +0200
Subject: [PATCH 3/3] Handle selection of placeholder value

---
 src/jquery.flagstrap.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 98ce777..1447697 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -329,7 +329,13 @@
             // 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
-            $('.flagstrap-selected-' + uniqueId).html( $container.find('li a[data-val='+country_code+']').html() );
+            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 () {